Html 使CSS菜单具有响应性,每个项目具有一定的宽度
我将此CSS代码用于HTML菜单:Html 使CSS菜单具有响应性,每个项目具有一定的宽度,html,css,Html,Css,我将此CSS代码用于HTML菜单: #CustomerMenu { margin-bottom:35px; } #CustomerMenu ul { text-align: left; display: inline; margin: 0; padding: 15px 4px 17px 0; list-style: none; -webkit-box-shadow: 0 0 5px rgba(243, 111, 37, 5); -m
#CustomerMenu {
margin-bottom:35px;
}
#CustomerMenu ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(243, 111, 37, 5);
-moz-box-shadow: 0 0 5px rgba(243, 111, 37, 5);
box-shadow: 0 0 5px rgba(243, 111, 37, 5);
}
#CustomerMenu ul li {
display: inline-block;
position:relative;
}
#CustomerMenu ul li a {
font: bold 12px/18px Arial;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #FFFFFF;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#CustomerMenu ul li a:hover {
background: #F36F25;
color: #FFFFFF;
}
#CustomerMenu ul li:hover > a {
background-color: #F36F25;
color: #FFFFFF;
}
#CustomerMenu ul li ul {
padding: 0;
position: absolute;
z-index:999;
top: 34px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#CustomerMenu ul li ul li a {
background: #666666;
display: block;
color: #FFFFFF;
width:100px;
}
#CustomerMenu ul li ul li a:hover {
background: #F35F25;
}
#CustomerMenu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
我想使每个
链接具有一定的宽度,无论是百分比还是固定宽度
另外,我可以让菜单响应吗?最好的方法是什么
使用媒体查询 我并没有添加完整的代码,只是展示了如何继续,网上有很多教程
@media screen and (min-width:0px) and (max-width:480px),
screen and (min-device-width:0px) and (max-device-width:480px){
#CustomerMenu ul li {
display: block;
}
#CustomerMenu ul li a {
font: bold 24px/36px Arial;
}
}
JSfiddle-调整浏览器大小以达到atake效果
正如用户Manjunath Siddapa所述,我没有添加完整的代码,或者在这种情况下,我的示例将不会使用您的代码 对于它的大小调整部分,您需要使用媒体查询,但由于您需要移动导航,您很可能希望它拉到一个大的下拉栏中,这就是它的用途 此代码将帮助您创建一个可垂直堆叠/隐藏的移动导航,然后使用
onClick
jQuery函数打开和关闭选项
JsFiddle:你知道会有多少菜单项吗?如果它是一个固定的数字,只需将100%除以该数字,然后使用一个百分比值<代码>#客户菜单{宽度:10%;}