www.webdeveloper.com
Results 1 to 2 of 2

Thread: Nav dropdown width & close on click

  1. #1
    Join Date
    Oct 2011
    Posts
    42

    Nav dropdown width & close on click

    Hi guys,

    I am building a navigation button and on click the menu drops down. This functionality works, but I have the submenu's width at 100% - reason I did this is because this is going to be on a mobile site so I want the submenu to expand to fit the screen. This is not doing this and I'm unsure why. Maybe I have just been staring at this code for too long hah.
    Also, when clicking on the menu button the button moves to the left when the submenu drops down.
    Anyone know why this is?

    And is there a way to add a button, centered at the bottom of the submenu labeled "close"? and then the user can click on button to close the menu. ?

    Any help would be much appreciated.

    Thanks.
    Here is my code:

    Code:
    <style type="text/css">
    ul, li{margin:0; border:0; padding:0; list-style:none;}
    #mobilebar{
    	font-size:11px;
    	color:#FFF;
    	padding:4px;
    	height:30px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	background-color: #900;
    }
    .menu {
    	float: right;	
    }
    #mobilebar .menu li {
    	height:30px;
    	float:left;
    	margin-right:10px;
    }
    #mobilebar .menu li a{
    	color:#FFF;
    	text-decoration:none;
    	padding:0 10px;
    	height:30px;
    	line-height:30px;
    	display:block;
    	float:left;
    	padding:0 26px 0 10px;
    
    }
    #mobilebar .menu li a:hover{
    color:#;
    }
    #mobilebar .menu li a:active{
    color:#FFF;
    background-color: #000;
    
    }
    
    
    
    /* CSS for Submenu */
    #mobilebar ul .submenu {
    	position:relative;
    	top:4px;
    	width:100%;
    	padding:6px 0;
    	clear:both;
    	z-index:2;
    	display:none;
    	background-color: #FFFFFF;
    	border-bottom-width: 10px;
    	border-top-style: none;
    	border-bottom-style: solid;
    	border-bottom-color: #9f010c;
    }
    #mobilebar ul .submenu li{
    	background:none;
    	display:block;
    	float:none;
    	margin:0 6px;
    	border:0;
    	height:auto;
    	line-height:normal;
    	border-top:dashed 1px #DEDEDE;
    }
    #mobilebar .submenu li a{
    background:none;
    display:block;
    float:none;
    padding:6px 6px;
    margin:0;
    border:0;
    height:auto;
    color:#105cbe;
    line-height:normal;
    }
    #mobilebar .submenu li a:hover{
    background:#e3edef;
    }
    img {
    	width: 100%;
    }
    </style>
    
    <script type="text/javascript">
    function showlayer(layer){
    var myLayer = document.getElementById(layer);
    if(myLayer.style.display=="none" || myLayer.style.display==""){
    myLayer.style.display="block";
    } else { 
    myLayer.style.display="none";
    }
    }
    
    </script>
    <div id="mobilebar">
    <ul class="menu">
    
    <li><a href="#" onclick="javascript:showlayer('sm_1')"><img src="img/global/menu.png"></a></li>
    
    <ul class="submenu" id="sm_1">
    <li><a href="p1.html">Products</a></li>
    <li><a href="p2.hmtl">Styles</a></li>
    <li><a href="p3.hmtl">Overview</a></li>
    <li><a href="p4.hmtl">My Accounts</a></li>
    <li><a href="p5.hmtl">Help & Support</a></li>
    <li><a href="p6.hmtl">Professional Class</a></li>
    <li><a href="p7.hmtl">Mobile Apps</a></li>
    <li><a href="p8.hmtl">Designs & Tutorials</a></li>
    <li><a href="p9.hmtl">Espanol</a></li>
    <li><a href="p9.hmtl">Current customers, please visit</a></li>
    </ul>
    
    </ul>
    </div>

  2. #2
    Join Date
    Oct 2011
    Posts
    42
    Anyone have any ideas here??

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles