JQUERY+CSS Implement Response Menu effect

Mobile End:

One, HTML

• Home




• Front-End development
  
  




• Html-css




• Jquery




• Javascript







• Back-end development
  
  




• Php




• Python




• Ruby







• Mobile development
  
  




• Android




• Ios







• Programming languages
  
  




• C-c++




• Java







• Industry Share




• Development platform
  
  




• Linux-vim




• Git

Second, CSS

#demo {
margin:0 Auto;
padding:0;
}
ul{
List-style:none;
}
ul.nav{
List-style:none;
font-family: "Microsoft Yahei"
}
Ul.nav li{
height:20px;
Color: #ffffff;
Cursor:pointer;
line-height:20px;
Background-color: #67544D;
padding:15px;
}
@media screen and (min-width:844px) {
#demo {
width:845px;
}
#icon {
Display:none;
}
ul.nav>li{
Display:inline-block;
margin-left:15px;
position:relative;
}
ul.submenu{
Position:absolute;
z-index:99;
top:50px;
Left: -20px;
width:64px;
Display:none;
margin-left:15px
}
Ul.submenu li{
width:100%;
Margin-left: -35px;
line-height:100%;
Text-align:center;
}
}
@media screen and (max-width:843px) {
#demo {
position:relative;
}
#icon {
Display:inline-block;
font-size:20px;
position:relative;
}
ul.nav{
width:100%;
position:relative;
Top: -18px;
left:0;
Display:none;
}
ul.nav>li{
Margin-left: -40px;
position:relative;
Height:auto;
}
ul.submenu{
Display:none;
Color:white
}
. shownav{
Display:block;
}
}

Third, JS

$ (function () {
$ ('. Nav>li '). each (function ()
{
$ (this). On ({
Mouseover:function () {
$ (this). CSS ({backgroundcolor: "#48403D", Color: "#ACE360"}). Find ("ul"). Slidedown (500).
Find ("Li"). each (function () {
$ (this). Hover (
function ()
{
$ (this). CSS ({backgroundcolor: "#48403D", Color: "#ACE360"});
},
function () {
$ (this). CSS ({backgroundcolor: "#67544D", Color: "#FFFFFF"});
});
});
},
Mouseleave:function () {
$ (this). FIND ("ul"). CSS ("display", "none"). Stop (true);
},
Mouseout:function () {
$ (this). CSS ({backgroundcolor: "#67544D", Color: "#FFFFFF"});
}
});
});
/*toggleclass does not work????? */
var count = 1;
$ ("#icon"). On ("click", Function () {
if (count = = 1) {
$ ("Ul.nav"). CSS ("Display", "block");
count++;
}
else{
$ ("Ul.nav"). CSS ("display", "none");
Count=1;
}
})