Implementing a horizontal sub menu with Javascript
Question
I am looking for some examples that I could use to implement a horizontal sub-menu in Javascript (not JQuery). I would like a menu that will be SEO friendly. Here's an example of what I am looking for:
opt1 opt2 opt3 opt4
opt1a opt1b opt1c opt1d
opt1 opt2 opt3 opt4
opt2a opt2b opt2c opt2d
So when the user hovers over opt1 at the top level then the opt1a, opt1b, opt1c and opt1d choices appear on the SECOND level menu below it. When the user hovers over opt2 at the top level then the opt2a, opt2b, opt2c and opt2d choices on the SECOND level would show.
Has anyone seen any code examples for this? What I am thinking of is to have four different DIVs for the second level menus and then have some way of making these DIVs visible when the user hovers over the different top levels. It sounds easy but I'm guess it is not so easy.
2 answers
solution1
0 2011-09-02 02:54:09
A good way to make a horizontal menu that has a minimum of cross-browser hassles is to use the following pattern. The key is to style what's INSIDE the <LI> and not the <LI> itself.
<div class="menu">
<ul>
<li>SOME TITLE</li>
<li><a href="...">link1</a></li>
<li><a href="...">2</a></li>
<li><input type="text" .../></li>
<li><input type="submit" class="submit" value="Submit"></li>
</ul>
</div>
CSS:
.menu ul, .menu li {
list-style=type:none;
padding:0;
margin:0
}
.menu li {
display:inline-block
}
.menu a {
display:block;
....other styles....
}
Then you nest them:
<div class="menu">
<ul>
<li>SOME TITLE</li>
<li><a href="...">link1</a>
<ul><li><a href="...">sub1</a></li></ul></li>
<li><a href="...">2</a></li>
<li><input type="text" .../></li>
<li><input type="submit" class="submit" value="Submit"></li>
</ul>
</div>
You're right, then use position:relative on ul li, position:absolute on ul ul etc... You're on the right track, but use lists, not DIVs.
solution2
0 2011-09-02 03:36:39
<html>
<head>
<style type="text/css">
#menu, #menu li ul{
display:inline;
list-style:none;
margin:0px;
padding:0px;
background-color:black;
color:white;
padding:5px;
}
#menu li ul {
position: absolute;
background-color:black;
color:white;
padding:5px;
display:none;
}
#menu li, #menu li ul li {
display:inline;
list-style:none;
margin:0px;
padding:0px;
}
#menu li:hover {
background-color:red;
}
#menu li:hover ul {
display:block;
}
</style>
</head>
<body>
<ul id="menu" >
<li>Menu 1
<ul>
<li>
Hello world
</li>
<li>
Hello world
</li>
<li>
Hello world
</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>
Hello world
</li>
<li>
Hello world
</li>
<li>
Hello world
</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</body>
</html>
This code probably does the same as above but the second level is below the top level. Hope this help !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.