最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery+css实现响应式菜单效果
时间:2015-04-01 编辑:简简单单 来源:一聚教程网
移动端:
一、HTML
二、CSS
#demo{
margin: 0 auto;
padding: 0;
}
ul{
list-style: none;
}
ul.nav{
list-style: none;
font-family: "Microsoft Yahei"
}
ul.nav li{
color: #ffffff;
cursor: pointer;
line-
background-color: #67544D;
padding: 15px;
}
@media screen and (min-){
#demo{
}
#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;
display: none;
margin-left: 15px
}
ul.submenu li{
width: 100%;
margin-left: -35px;
line-height: 100%;
text-align: center;
}
}
@media screen and (max-){
#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;
}
}
三、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不起作用?????*/
var count = 1;
$("#icon").on("click",function(){
if(count == 1){
$("ul.nav").css("display","block");
count++;
}
else{
$("ul.nav").css("display","none");
count=1;
}
})
-
上一个: Javascript实现简单的拖动效果
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31