Im pretty sure that this navigation menu uses jquery… Although I could be wrong and it that case ive posted this thread in the wrong part of the forum!
Anyway… The thing is I would like to recreate or find a jquery plugin very similar to this one, although up until now i cant find anything much like it.
If anyone knows of a jquery plugin that I could customize to look pretty much like the one in my example i would be very grateful.
Any additional advice/recommendations are also very welcome.
It is just a normal dropdown menu (that probably uses jQuery).
Try googling “jQuery dropdown”, you find lots of sites like this one, which should point you in the right direction.
Although i do have a couple of issues with the layout of the navigation menu. Please can some one take a look and see what I need to do?
As Pullo advised i done some googling and found the dropdown tut listed below. I have managed to modify this to pretty much how i want the menu to look and function except for a couple of things:
Now the problem is that when you hover over the 3rd link along in the menu there is a border at the top of the sub-menu which spans the entire length.
What i would like to do is for that top border to only go as far as the border of the parent link’s right hand side border, thus leaving a blank space between the two links (except for the outside that is).
If you are confused at this stage please check the very first link in this thread and you’ll see what I’m trying to achieve.
The other issue im having is that there is a css reset file including in the download and as soon as I remove it the links in my sub-menu float off to the right a fair bit. Can anyone help me correct this please as i would really like to ditch the CSS reset file?
And lastly there seems to be some slight movement on the links when you hover over them… I’m sure i can find this error by myself but if anyone can see the problem staring them in the face please let me know.
Thanks so much for you help guys… It really is truly appreciated.
You can hide the top border of the ul by using the background on the anchor to rub out the border by moving it on top.
The other issue im having is that there is a css reset file including in the download and as soon as I remove it the links in my sub-menu float off to the right a fair bit. Can anyone help me correct this please as i would really like to ditch the CSS reset file?
You should be looking at creating your own reset file but the rules that are upsetting you in this case is the default left margin and left padding on the ul. You need to reset them
And lastly there seems to be some slight movement on the links when you hover over them… I’m sure i can find this error by myself but if anyone can see the problem staring them in the face please let me know.
You should never cause a reflow on hover because that creates a displacement on the page that has a knock on effect all the way down the page (sometimes). If you want to show a border on hover then change the border colour instead. e.g. use a white border to start with so that it merges with the background and then change its colour on hover and you will get no jump.
Here are most of those points wrapped into your example.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<script type="text/javascript" src="js/modernizr-1.6.min.js"></script>
<style type="text/css">
body {
margin-top: 50px;
font-family: Arial;
}
h2 {
font-size: 20px;
color: #999;
padding: .5em 0;
}
h3 { font-size: 14px; }
/* Structure
------------------------------------------*/
#coolMenu, #coolMenu ul {
list-style: none;
margin:0;
padding:0
}
#coolMenu { float: left; }
#coolMenu > li {
float: left;
position:relative;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 10px 12px;
text-decoration: none;
background:#fff;
z-index:1000;
}
#coolMenu ul {
position: absolute;
z-index: 999;
left:0;
top:100%;
display:none;
}
#coolMenu ul li a { width: 80px; }
#coolMenu li:hover ul.noJS { display:block }
/* Main menu
------------------------------------------*/
#coolMenu {
font-family: Arial;
font-size: 12px;
}
#coolMenu > li > a {
color: #000;
font-weight: bold;
border: 1px solid #fff;
border-bottom:none;
position:relative;
z-index:1000;
top:1px;
}
#coolMenu > li:hover > a {
color: #F00;
background-color: #FFF;
-moz-border-radius: 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
border-color:#999;
padding-bottom:11px;
}
/* Submenu
------------------------------------------*/
#coolMenu ul {
background: #fff;
border:1px solid #999;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0x 3px 3px;
}
#coolMenu ul li a {
color: #000;
font-weight: bold;
}
#coolMenu ul li:hover a {
background: #fff;
text-decoration:underline;
}
#coolMenu ul li a {
border-bottom: 1px dashed #999999;
margin:0 5px;
}
#coolMenu ul li:last-child a { border:none }
</style>
</head>
<body>
<div class="container_16">
<div class="grid_16">
<h2>Tutorial</h2>
<h3>How to create a horizontal dropdown menu with HTML, CSS and jQuery</h3>
<br/>
<ul id="coolMenu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Mauricii</a></li>
<li> <a href="#">Periher</a>
<ul class="noJS">
<li><a href="#">Hellenico</a></li>
<li><a href="#">Genere</a></li>
<li><a href="#">Indulgentia</a></li>
</ul>
</li>
<li><a href="#">Tyrio</a></li>
<li><a href="#">Quicumque</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#coolMenu').find('> li').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.stop(true, true).slideToggle('fast');
});
});
</script>
</body>
</html>
I removed your dashed line rules because not only were they invalid they were also unnecessary . You are not allowed to put any html between successive list pairs. All content must be inside the opening list tag and closing list tag and then the whole lot closed off with the closing ul. No other html is allowed in the gaps.
Try not to use breaks to make space. Just use a margin on the element concerned.
Have taken on-board what you’ve said and things are looking really good now. The layout and navigation is almost complete, will post a link when the site is done.
