Sliding Menu using division
Created one sliding menu.The issue is that it is not working properly.it is sliding down and up continuously...I have commented some part for ease of understanding...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#home").mouseover(function(){
if ($("#slide_home").is(":hidden")) {
$("#slide_home").slideDown("normal");}
});
$("#slide_home").mouseover(function(){
if ($("#slide_home").is(":hidden")) {
$("#slide_home").show();}
});
$("#home").mouseout(function(){
if (!$("#slide_home").is(":hidden")) {
$("#slide_home").slideUp("normal");}
});
$("#javascript").mouseover(function(){
if ($("#slide_javascript").is(":hidden")) {
$("#slide_javascript").slideDown("normal");}
});
$("#javascript").mouseout(function(){
$("#slide_javascript").slideUp("normal");
});
});
</script>
<style type="text/css">
#menubar{
width:1130px;
height:35px;
background-color:blue;
border:black;
margin-left:60px;
padding:10px 0px 0px 0px;
}
.inner{
width:100px;
float:left;
color:white;
height:35px;
padding-left: 75px;
}
.slide{
width:96px;
height:150px;
border:2px solid blue;
background-color:pink;
align:center;
display:none;
}
#list{
width:92px;
height:26px;
color:red;
border:2px solid yellow;
}
#conetent_outer{
width:1130px;
height:550px;
background-color:yellow;
border:black;
margin-left:60px;
padding:10px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="menubar">
<div class="inner" align="center" id="home">HOME
<div class="slide" id="slide_home" align="center">
<a href="http://www.yahoo.com"><div id="list">think1</div></a>
<a href="http://www.w3schools.com"><div id="list">think2</div></a>
<a href="http://www.w3schools.com"><div id="list">think3</div></a>
<a href="http://www.w3schools.com"><div id="list">think4</div></a>
<a href="http://www.w3schools.com"><div id="list">think5</div></a>
</div>
</div>
<div class="inner" align="center" id="javascript">JAVASCRIPT
<div class="slide" id="slide_javascript" align="center">
<a href="http://www.yahoo.com"><div id="list">think1</div></a>
<a href="http://www.w3schools.com"><div id="list">think2</div></a>
<a href="http://www.w3schools.com"><div id="list">think3</div></a>
<a href="http://www.w3schools.com"><div id="list">think4</div></a>
<a href="http://www.w3schools.com"><div id="list">think5</div></a>
</div>
</div>
<!--<div class="inner" align="center" id="jquery">JQUERY
<div class="slide" id="slide_jquery" align="center">
<a href="http://www.yahoo.com"><div id="list">think1</div></a>
<a href="http://www.w3schools.com"><div id="list">think2</div></a>
<a href="http://www.w3schools.com"><div id="list">think3</div></a>
<a href="http://www.w3schools.com"><div id="list">think4</div></a>
<a href="http://www.w3schools.com"><div id="list">think5</div></a>
</div>
</div>
<div class="inner" align="center" id="prototype">PROTOTYPE
<div class="slide" id="slide_prototype" align="center">
<a href="http://www.yahoo.com"><div id="list">think1</div></a>
<a href="http://www.w3schools.com"><div id="list">think2</div></a>
<a href="http://www.w3schools.com"><div id="list">think3</div></a>
<a href="http://www.w3schools.com"><div id="list">think4</div></a>
<a href="http://www.w3schools.com"><div id="list">think5</div></a>
</div>
</div>
<div class="inne开发者_Go百科r" align="center" id="dotnet">DOT NET
<div class="slide" id="slide_dotnet" align="center">
<a href="http://www.yahoo.com"><div id="list">think1</div></a>
<a href="http://www.w3schools.com"><div id="list">think2</div></a>
<a href="http://www.w3schools.com"><div id="list">think3</div></a>
<a href="http://www.w3schools.com"><div id="list">think4</div></a>
<a href="http://www.w3schools.com"><div id="list">think5</div></a>
</div>
</div>
<div class="inner" align="center" id="forums">FORUMS
<div class="slide" id="slide_forums" align="center">
<a href="http://www.yahoo.com"><div id="list">think1</div></a>
<a href="http://www.w3schools.com"><div id="list">think2</div></a>
<a href="http://www.w3schools.com"><div id="list">think3</div></a>
<a href="http://www.w3schools.com"><div id="list">think4</div></a>
<a href="http://www.w3schools.com"><div id="list">think5</div></a>
</div>
</div>-->
</div>
<div id="conetent_outer">
</div>
</body>
</html>
First of all it should be markup with ul, li the same nested. It's a lot of well tested and polished menu plugins you can find. Here is small list of them:
38 jQuery And CSS Drop Down Multi Level Menu Solutions
15 Really Amazing jQuery Navigation Menu – Tutorials & Scripts
If you look at http://jsfiddle.net/bhofmann/Skt2a/1/ you'll see that using mouseenter and mouseleave fixes the issue for you.
加载中,请稍侯......
精彩评论