Results 1 to 1 of 1

Thread: I want to turn a drop down menu into a "pull up menu"

  1. #1
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I want to turn a drop down menu into a "pull up menu"

    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?
    Last edited by domskidan; 05-26-2011 at 01:50 AM.

Bookmarks

Posting Permissions

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