Results 1 to 2 of 2

Thread: how can I add drop down menus on

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    365
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Question how can I add drop down menus on

    On this test page I am messing around with responsive layouts.

    HTML for the menu bar:
    HTML Code:
    <nav class="top-nav">
    						
    <ul class="top-nav">
    							
    <li class="active"><a href="#home" class="scroll">Home <span> </span></a></li>
    							
    <li class="page-scroll"><a href="#fea" class="scroll">Features<span> </span></a></li>
    							
    <li class="page-scroll"><a href="#screen" class="scroll">Slideshow<span> </span></a></li>
    							
    <li class="page-scroll"><a href="#about" class="scroll">About <span> </span></a></li>
    							
    
    <li class="page-scroll"><a href="#price" class="scroll">Pricing<span> </span></a></li>
    							
    <li class="page-scroll"><a href="#dir" class="scroll">Directions<span> </span></a></li>
    							
    <li class="contatct-active" class="page-scroll"><a href="#contact" class="scroll">Contact </a></li>
    						
    </ul>
    						
    <a href="#" id="pull"><img src="images/nav-icon.png" title="menu" /></a>
    					
    </nav>

    Code:
    <!----start-top-nav-script---->
    		
    <script>
    			$(function() {
    				var pull 		= $('#pull');
    					menu 		= $('nav ul');
    					menuHeight	= menu.height();
    				$(pull).on('click', function(e) {
    					e.preventDefault();
    					menu.slideToggle();
    				});
    				$(window).resize(function(){
    	        		var w = $(window).width();
    	        		if(w > 320 && menu.is(':hidden')) {
    	        			menu.removeAttr('style');
    	        		}
    	    		});
    			});
    		</script>
    		<!----//End-top-nav-script---->
    Last edited by mlegg; 06-13-2014 at 11:12 PM.

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    365
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    oops, forgot the CSS

    Code:
    /*----navbar-nav----*/
    .top-nav ul li a{
    	color: #999;
    	padding: 0.2em 1em;
    	font-size: 0.95em;
    	font-weight: 500;
    	text-align: center;
    	text-transform: uppercase;
    	position: relative;
    }
    .top-nav ul li.active a,
    .top-nav ul li a:hover{
    	color:#0687ff;
    }
    .logo a{
    	display:block;
    }
    /* top-nav */
    .top-nav:before,
    .top-nav:after {
        content: " ";
        display: table;
    }
    .top-nav:after {
        clear: both;
    }
    nav {
    	position: relative;
    	float: right;
    }
    nav ul {
    	padding: 0;
    	float: right;
    	margin: 0.75em 0;
    }
    nav li {
    	display: inline;
    	float: left;
    	position:relative;
    }
    nav a {
    	color: #fff;
    	display: inline-block;
    	text-align: center;
    	text-decoration: none;
    	line-height: 40px;
    }
    nav a:hover{
    	text-decoration:none;
    	color:#00A2C1;
    }
    nav a#pull {
    	display: none;
    }

Similar Threads

  1. Replies: 2
    Last Post: 09-06-2011, 10:25 AM
  2. Anylink drop down menu - Demo #3 (sub menus drop to the right of anchor):
    By pjdcreative in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-17-2010, 03:54 AM
  3. Drop Down Tabs: Drop down menus do not display
    By Surly1 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-07-2009, 12:48 AM
  4. js Help with drop down menus
    By crazy8 in forum JavaScript
    Replies: 0
    Last Post: 02-14-2007, 07:28 PM
  5. Drop down menus
    By michaellofts in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-17-2005, 09:28 PM

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
  •