Creating a menu - Please review my code

This site is best viewed in a modern browser with JavaScript enabled.

Creating a menu - Please review my code

Nick-S

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:

<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>

CSS:

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;}

JMRKER

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.

liveproject101

If you want to create a Drop Down Menu for your site You may take help from following Program:

First off, the CSS

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

and secondly, the HTML

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>

Live Project Training

dennist82

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-S

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 clicks 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.

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

dennist82

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>

dennist82

Eck, how did you guys create code textbox? apparently it wasn't quote.

Nick-S

dennist82;1260863 wrote:
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:

Hey dennist82

It's not working, I'm not sure why.
On my CSS I changed #menu li:active to #menu li:hover.
What am I doing wrong?

Here is the updated 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>

CSS

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;
}

dennist82

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-S

dennist82;1260879 wrote:
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.

Hey dennist82
It's still not working for some reason.
Should I get rid of the Hover state on line 17?

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

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?

dennist82

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

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

html

<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>

Nick-S

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.

Nick-S

Nick-S;1261179 wrote:
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.

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!