Creating a menu – Please review my code

@Nick-SApr 11.2013

Hey friends

I’m creating a menu simiilar to Windows start menu that once clicked, other submenus pop up.
However, it doesn’t seem to work.
Could you please show me what I’m doing wrong?

Here is my code:

HTML:

[code=html]<html> <head>

<link rel=”stylesheet” type=”text/css” href=”menu.css”>

</head> <body>

<script> $(‘.menu’).click(function(e) { e.stopPropagation(); $(this).next().toggle(); }); $(‘body’).click(function() { $(‘.menu’).next().hide(); }); </script>

<div id=”menu”> <ul> <li><a href=”javascript:void(0);” class=”menu”><p>Start</p></a> <div class=”submenu”> <ul> <li><a href=””><p>Documents</p></a></li> <li><a href=””><p>Images </p></a></li> <li><a href=””><p>Videos</p></a></li> <li><a href=””><p>Settings</p></a></li> <li><a href=””><p>Log off</p></a></li> </ul> </li> </ul> </div> </div>

</body> </html>[/code]

CSS:

[CODE] body{background-color:grey;}

#menu li{width:200px; float:left;list-style-type:none; position:relative; top:530px; left:-47px;} #menu a{ border-radius:15px; display:block; color:white; text-indent:55px; border:1px solid white; background-color:black; font-size:18pt; font-weight:bold; text-decoration:none;} #menu a:hover{color:black; background: white;}

#menu ul .submenu li{height:75px; float:left; width:250px;} #menu li .submenu{position:absolute; left:20px; top:-907px; width:10px; height:200px; display:none;}

#menu li:active .submenu{display:block; float:left; height:200px;}

[/CODE]

to post a comment

JavaScript

12 Comments(s) _↴

@JMRKERApr 11.2013 — #Either you have omitted some code

or you are using JQuery and have left out the loading of the library source for anything to happen.

@liveproject101Apr 11.2013 — #[B][SIZE=3][COLOR=#0000cd]If you want to create a [SIZE=3]Drop Down Menu for yo[SIZE=3]ur site You may [SIZE=3]take help from following Program:[/SIZE][/SIZE][/SIZE][/COLOR]

First off, the CSS[/SIZE][/B]

Place the following CSS in between your < head > < / head > tags.

<style>

/*---- CROSS BROWSER DROPDOWN MENU ----*/

ul#nav {margin: 0 0 0 200px;}

ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}

ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #555; color: #fff;}

ul.drop { position: relative; z-index: 597; float: left; }

ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }

ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; }

ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #fff; }

ul.drop ul li { float: none; }

ul.drop ul ul { top: -2px; left: 100%; }

ul.drop li:hover > ul { visibility: visible }

</style>

[B][SIZE=3]and secondly, the HTML[/SIZE][/B]

Place the following HTML in between your < body > < / body > tags.

<ul id="nav" class="drop">

<li><a href="#">Home</a></li>

<li>About Us

<ul>

<li><a href="#">History</a></li>

<li><a href="#">Clients</a></li>

<li><a href="#">Testimonials</a></li>

<li><a href="#">Staff</a>

<ul>

<li><a href="#">George Orsmond</a>

<ul>

<li>Web Design</li>

<li>Graphic Design</li>

<li>HTML</li>

<li>CSS</li>

</ul>

</li>

<li><a href="#">Dave Macleod</a></li>

</ul>

</li>

<li><a href="#">FAQs</a></li>

</ul>

</li>

<li>Services

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">Graphic Design</a></li>

<li><a href="#">Logo Design</a></li>

</ul>

</li>

<li>Products

<ul>

<li class="dir"><a href="#">Templates</a></li>

<li class="dir"><a href="#">Stock Images</a>

<ul>

<li><a href="#">Category 1</a></li>

<li><a href="#">Category 2</a></li>

<li><a href="#">Category 3</a></li>

<li><a href="#">Category 4</a></li>

<li><a href="#">Category 5</a></li>

</ul>

</li>

<li><a href="#">Featured</a></li>

<li><a href="#">Top Rated</a></li>

<li><a href="#">Resources</a></li>

</ul>

</li>

<li><a href="#">Gallery</a></li>

<li>Contact Us

<ul>

<li><a href="#">Contact Form</a></li>

<li><a href="#">How to get here</a></li>

<li><a href="#">View the map</a></li>

</ul>

</li>

</ul>[/QUOTE]

Live Project Training

@dennist82Apr 11.2013 — #Very good job on majority of the code in css, you just one small step away from have it working.

Look at line 15 in your menu.css

Change #menu li:active to #menu li:hover should resolve the awkward start menu doesn't stay open after click.

active event only trigger when user click on start button, but once user let go the mouse button, the menu will hidden again.

If you really want to click the start button to pop up the menu, then you might want to think about adding javascript.

@Nick-SauthorApr 11.2013 — #Hey everyone. ?

Thanks for your replies, I just wanted to clarify something.

I want my menu to work similarly to the Windows 7 Start menu.

Basically, Once the user [B]clicks[/B] on the main menu, a list would pop out.

I'm new to JavaScript, so I'm not sure what I'm exactly doing.

I tried the code below, but it's not working.

[CODE]<script>
 $('.menu').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
 $('body').click(function() { $('.menu').next().hide(); });
 </script>[/CODE]

@dennist82Apr 12.2013 — #Here is what I got, first I notice you are using jquery syntax, but you forgot to include jquery.js

Another part, <script> place before html content which means event handlers weren't attach to element before html finish loading.

Solution: <html>

<head>

<link rel="stylesheet" type="text/css" href="menu.css">

<script src="jquery-1.9.1.min.js"> </script>

</head>

<body>

<div id="menu">

<ul>

<li><a href="javascript:void(0);" class="menu"><p>Start</p></a>

<div class="submenu">

<ul>

<li><a href=""><p>Documents</p></a></li>

<li><a href=""><p>Images </p></a></li>

<li><a href=""><p>Videos</p></a></li>

<li><a href=""><p>Settings</p></a></li>

<li><a href=""><p>Log off</p></a></li>

</ul>

</li>

</ul>

</div>

</div>

<script>

/*

$('.menu').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });

$('body').click(function() { $('.menu').next().hide(); });

*/

$("#menu").bind('click',function(){

$("#menu li .submenu").toggle();

});

</script>

</body>

</html>[/QUOTE]

@dennist82Apr 12.2013 — #Eck, how did you guys create code textbox? apparently it wasn't quote. ?

@Nick-SauthorApr 12.2013 — #Here is what I got, first I notice you are using jquery syntax, but you forgot to include jquery.js

Another part, <script> place before html content which means event handlers weren't attach to element before html finish loading.

Solution:[/QUOTE]

Hey dennist82 ?

It's not working, I'm not sure why.

On my CSS I changed [B]#menu li:active[/B] to [B]#menu li:hover[/B].

What am I doing wrong?

Here is the updated code:

HTML

[code=html]<html>
 <head>
 
 <link rel="stylesheet" type="text/css" href="menu.css">
 <script src="jquery-1.9.1.min.js"> </script>
 </head>
 
 <body>
 <div id="menu">
 <ul>
 <li><a href="javascript:void(0);" class="menu"><p>Start</p></a>
 <div class="submenu">
 <ul>
 <li><a href=""><p>Documents</p></a></li>
 <li><a href=""><p>Images </p></a></li>
 <li><a href=""><p>Videos</p></a></li>
 <li><a href=""><p>Settings</p></a></li>
 <li><a href=""><p>Log off</p></a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
 <script>
 /*
 $('.menu').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
 $('body').click(function() { $('.menu').next().hide(); });
 */
 
 $("#menu").bind('click',function(){
 $("#menu li .submenu").toggle();
 });
 
 </script>
 
 </body>
 </html> [/code]

CSS

[CODE]body{background-color:grey;}
 
 #menu li{width:200px; float:left;list-style-type:none;
 position:relative; top:530px; left:-47px;}
 #menu a{ border-radius:15px; display:block; color:white;
 text-indent:55px; border:1px solid white; background-color:black;
 font-size:18pt; font-weight:bold; text-decoration:none;}
 #menu a:hover{color:black; background: white;}
 
 /*submenu design*/
 #menu ul .submenu li{height:75px; float:left; width:250px;}
 #menu li .submenu{position:absolute; left:20px; top:-907px;
 width:10px; height:200px; display:none;}
 
 /*Press/hover to fire-up menu*/
 #menu li:hover .submenu{display:block; float:left;  height:200px;
 }[/CODE]

@dennist82Apr 12.2013 — #O, I forgot to tell you about line 5, you have to change it to:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

You need to have jquery library before my javascripts to work.

@Nick-SauthorApr 12.2013 — #O, I forgot to tell you about line 5, you have to change it to:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

You need to have jquery library before my javascripts to work.[/QUOTE]

Hey dennist82

It's still not working for some reason.

Should I get rid of the Hover state on line 17?

[CODE]/
 #menu li:hover .submenu{display:block; float:left;  height:200px;}[/CODE]

Whenever I hover over the start button the menu pops out, but nothing happens when I click on it.

Is it working in your end?

@dennist82Apr 12.2013 — #Here are my code that works on my end.

It most likely, you are testing the html page locally. It easy to identify rather it load from http or local file. Look at the URL, if it starts with file:///C:, then it is only access your local directory which means you have to download jquery library from jquery.com, then place it in same directory as html page.

menu.css

[CODE]
 body{background-color:grey;}
 
 #menu li{width:200px; float:left;list-style-type:none;
 position:relative; top:530px; left:-47px;}
 #menu a{ border-radius:15px; display:block; color:white;
 text-indent:55px; border:1px solid white; background-color:black;
 font-size:18pt; font-weight:bold; text-decoration:none;}
 #menu a:hover{color:black; background: white;}
 
 #menu ul .submenu li{height:75px; float:left; width:250px;}
 #menu li .submenu{position:absolute; left:20px; top:-907px;
 width:10px; height:200px; display:none;}
 
 
 /*#menu li:hover .submenu{display:block; float:left;  height:200px;}*/
 [/CODE]

html

[CODE]
 <html>
 <head>
 
 <link rel="stylesheet" type="text/css" href="menu.css">
 <script src="jquery-1.9.1.min.js"> </script><!-- if you testing html locally, then you need to download jquery library.  Place the file on the same directory as html file  -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!-- this only works when your webpage is access through http -->
 </head>
 <body>
 
 
 
 <div id="menu">
 <ul>
 <li><a href="javascript:void(0);" class="menu"><p>Start</p></a>
 <div class="submenu">
 <ul>
 <li><a href=""><p>Documents</p></a></li>
 <li><a href=""><p>Images </p></a></li>
 <li><a href=""><p>Videos</p></a></li>
 <li><a href=""><p>Settings</p></a></li>
 <li><a href=""><p>Log off</p></a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
 <script>
 /*
 $('.menu').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
 $('body').click(function() { $('.menu').next().hide(); });
 */
 
 $("#menu").bind('click',function(){
 $("#menu li .submenu").toggle();
 });
 
 </script>
 
 </body>
 </html>
 [/CODE]

@Nick-SauthorApr 13.2013 — #dennist82, many thanks!!!

It's working very well.

Is there a thank you button in this forum?

One last thing; I noticed that the submenu stays open unless I click the start button again. Is it possible to close the submenu when I click on an empty space or anywhere on my page except the start button?

I really need to learn JavaScript.[/QUOTE]

Oops I wasn't able to edit my post to clarify something, so here it goes.

I want the submenu to disappear or return to it's original state once I hover outside the submenu area, is that possible?

Once again, many thanks! ?

Also in #JavaScript _↴

CSS help needed!!!question about LoadSrcImage command!window resize in firefox

Success!

Help @Nick-S spread the word by sharing this article on Twitter...

Tweet This

Creating a menu – Please review my code

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Creating a menu – Please review my code

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴