Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member Dan Domski's Avatar
    Join Date
    Apr 2011
    Location
    Pittsburgh, Pennsylvania
    Posts
    4
    Member #
    27467
    Hello,

    I am attempting to modify http://www.dynamicdrive.com/dynamici...rome/index.htm
    I want the drop down menu to go up in stead of down.

    I am then going to use the "pull up" menu for a "user panel" I created for my online portfolio, which will act as the navigation for my site. http://danieldomski.com/.

    Where in the style sheet do I need to make the modification?

    I do not even think I need it a list to embed it, instead I want to do something like this:

    HTML
    Code:
    <div class="chromestyle" id="chromemenu">
    <a href="#" class="button_htmldocs" rel="dropmenu2"></a>	
    </div>
    My CSS Code
    CSS
    Code:
    	}
    	a.button_htmldocs {
    	text-decoration:none;
    	display:block;
    	text-align:center;
    	font-weight: normal;
    	background-image: url(../images/userpanel_htmdocs_up.png);
    	margin: 0px;
    	width: 60px;
    	height: 62px;
    	background-repeat: no-repeat;
    	float: none;
    
    	}
    	a.button_htmldocs:hover {
    	color:#CCCCCC;
    	background-image: url(../images/userpanel_htmdocs_down.png);
    	text-decoration: none;
    	background-repeat: no-repeat;
    	}
    Drop Down CSS Code
    Code:
    .chromestyle{
    width: 99%;
    font-weight: bold;
    }
    
    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    
    .chromestyle ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: center; /*set value to "left", "center", or "right"*/
    }
    
    .chromestyle ul li{
    display: inline;
    }
    
    .chromestyle ul li a{
    color: #494949;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }
    
    .chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
    background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
    }
    
    /* ######### Style for Drop Down Menu ######### */
    
    .dropmenudiv{
    	position:absolute;
    	border: 1px solid #BBB;
    	border-bottom-width: 0;
    	font:normal 12px Verdana;
    	line-height:18px;
    	z-index:100;
    	width: 200px;
    	visibility: hidden;
    	top: 0px;
    	background-color: #CCCCCC;
    
    
    }
    
    
    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #333333; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }
    
    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }
    
    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #F0F0F0;
    }
    ... Or would this modification need to be made in the JS?

  2.  

  3. #2
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    JS. I was looking for an easy fix that existed within the implementation but couldn't find one. You'd have to do some coding for this.
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  4. #3
    Junior Member Dan Domski's Avatar
    Join Date
    Apr 2011
    Location
    Pittsburgh, Pennsylvania
    Posts
    4
    Member #
    27467
    I think I am just going to make a tootip, make the background transparent then put a vertical style navigation menu inside the tooltip.

  5. #4
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    You could write something pretty rudimentary. Grab jQuery and setup some Relative div elements that contain what you want in your drop-up.

    not tested
    Code:
    <div id="menuList" style="position: relative;">
        <ul>
        <li>Item 1
        <li>Item 2
        </ul>
    </div>
    <div id="menuTitle">Show Menu</div>
    
    <script type="text/javascript">
    $(function() {
        // Move the element up, the distance of its height
        $("#menuList").top = -$("#menuList").height();
    });
    $("#menuTitle").click(function() {
        $("#menuList").fadeIn();
    });
    </script>
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

css menu drop up

,

drop up menu css

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:14 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com