6 Replies - 1147 Views - Last Post: 13 June 2014 - 02:50 PM

#1 mlegg10  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 17-December 12

How can I add a drop down menu on this responsive nav bar?

Posted 13 June 2014 - 09:21 AM

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

HTML for the menu bar:
<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>


script:
<!----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---->


css:
/*----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;
}

This post has been edited by laytonsdad: 13 June 2014 - 11:34 AM


Is This A Good Question/Topic? 0
  • +

Replies To: How can I add a drop down menu on this responsive nav bar?

#2 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: How can I add a drop down menu on this responsive nav bar?

Posted 13 June 2014 - 09:53 AM

There is no reason you can not add anything you want to the page.
Was This Post Helpful? 0
  • +
  • -

#3 mlegg10  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 17-December 12

Re: How can I add a drop down menu on this responsive nav bar?

Posted 13 June 2014 - 11:05 AM

I need to edit the original title. I want it to say How can I add a drop down menu on this responsive nav bar?

Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,991
  • Joined: 30-April 10

Re: How can I add a drop down menu on this responsive nav bar?

Posted 13 June 2014 - 11:34 AM

Title changed.

How would you like it to drop down? What do you want in it?

This post has been edited by laytonsdad: 13 June 2014 - 11:37 AM

Was This Post Helpful? 0
  • +
  • -

#5 mlegg10  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 17-December 12

Re: How can I add a drop down menu on this responsive nav bar?

Posted 13 June 2014 - 01:44 PM

I would like it to have a sub menu under features and each link would say
Upper Level
Lower Level

then I will assign them a div id
Was This Post Helpful? 0
  • +
  • -

#6 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: How can I add a drop down menu on this responsive nav bar?

Posted 13 June 2014 - 02:05 PM

There are so many ways to implement drop downs. Many are very bad, slow and ugly and from a design point of view I think they should be avoided and only ever used if you have a lack of space.

Anyways..
Your best bet is to do a CSS hack of the stanadrd select input element.
Replace your existing menu with
<select id="Menu1"> 
<option >Menu name</option>
<option >Sub option one</option>
<option >Sub option two</option> 


Use the mouseOver and mouseOut to open and close them. Use the onchange to suppress the value change when clicked and to navigate, and go to town with the CSS styles to make them look how you want. This way if there is a browser/device issuse the user has a fall back. As long as you make sure the onchange is robust.

But really consider a better option. Dropdowns are bad design.
Was This Post Helpful? 0
  • +
  • -

#7 mlegg10  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 17-December 12

Re: How can I add a drop down menu on this responsive nav bar?

Posted 13 June 2014 - 02:50 PM

Thanks, I just added separate menu lines without the drop down
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1