Html 如何在响应css菜单上添加子菜单
我的css菜单有以下html:Html 如何在响应css菜单上添加子菜单,html,menu,css,Html,Menu,Css,我的css菜单有以下html: <nav class="clearfix"> <ul class="clearix"> <li><a href="http://www.domain.co.uk/">Homepage</a></li> <li><a href="/services">Services</a></li> <
<nav class="clearfix">
<ul class="clearix">
<li><a href="http://www.domain.co.uk/">Homepage</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/project-gallery">Project Gallery</a></li>
<li><a href="/contact-us">Contact Us</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
我正在寻找一种方法来添加子菜单,然后在第一个子菜单上添加第二个子菜单,但仍然保持它的响应性
我该怎么做
有很多方法可以解决这个问题 我通常使用
display:none
隐藏子菜单ul
s,并使用position:absolute
将它们从内容流中取出。给出包含子菜单的li
位置:relative,使子菜单与其直接父菜单相对,然后使用顶部
、右侧
、底部
和左侧
属性来定位子菜单。最后,通过:悬停
或其他方式将子菜单更改为display:block
下面是一个简单的例子:
标记:
<nav>
<ul>
<li><a>Link</a>
<ul>
<li><a>Sub link</a></li>
<li><a>Sub link</a></li>
<li><a>Sub link</a></li>
</ul>
</li>
</ul>
</nav>
。这看起来很糟糕,但你得到了训练
您可以继续嵌套更多的子菜单,但您可能希望对第二级和更低级别的子菜单使用不同的定位
但是,请注意,移动浏览器并不真正支持
:hover
。至少他们对待它不一样。您不应该只在:hover
上访问子菜单。考虑添加一些类名切换,点击JavaScript代替。 < P>我不确定100%,如果你问如何让ID菜单有菜单功能,或者只是一个主菜单的子菜单。< /P>
如果它与主导航的子菜单有关,那么这将正常工作。如果是移动菜单,请告诉我,我会为您解决问题。(已解决)
这把小提琴的子菜单工作,而仍然是响应整个时间。你可以根据自己的需要设计它,但这是一个坚实的开端
nav ul li ul {
display: none;
position: absolute;
width: 100%;
top: 100%;
background: #000;
color: #fff;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
display: block;
-webkit-transition: .6s ease;
-moz-transition: .6s ease;
-ms-transition: .6s ease;
-o-transition: .6s ease;
}
nav ul li ul li:hover {
background: #c1c1c1;
color: #2b2b2b;
}
这是移动导航的工作方式,最大的问题是没有为fiddle选择jQuery库
HTML
<div id="pull"><span>Menu</span>
</div>
<nav>
<input type="checkbox" id="nav-toggle-1" />
<label for="nav-toggle-1" class="pull sub"><a>Menu</a></label>
<ul class="lvl-1">
<li><a href="http://www.domain.co.uk/">Homepage</a></li>
<li>
<input type="checkbox" id="nav-toggle-2" />
<label for="nav-toggle-2" class="sub"><a>Services</a></label>
<ul class="lvl-2">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li>
<input type="checkbox" id="nav-toggle-3" />
<label for="nav-toggle-3" class="sub"><a>Service 3</a></label>
<ul class="lvl-3">
<li><a href="#">Service 3 a</a></li>
<li><a href="#">Service 3 b</a></li>
</ul>
</li>
<li><a href="#">Service 4</a></li>
</ul>
</li>
<li><a href="/project-gallery">Project Gallery</a></li>
<li><a href="/contact-us">Contact Us</a></li>
</ul>
</nav>
我将id pull改为div,因为当它是锚定标记时,所有导航都会失去文本颜色
我已经做了一个下拉列表,其中有一个下拉列表,但仍然是响应!在这座桥上攀登高峰
在css中使用悬停,如:
a:hover
或者如果您的div id为“div1”:
以下是我的看法:
HTML
<div id="pull"><span>Menu</span>
</div>
<nav>
<input type="checkbox" id="nav-toggle-1" />
<label for="nav-toggle-1" class="pull sub"><a>Menu</a></label>
<ul class="lvl-1">
<li><a href="http://www.domain.co.uk/">Homepage</a></li>
<li>
<input type="checkbox" id="nav-toggle-2" />
<label for="nav-toggle-2" class="sub"><a>Services</a></label>
<ul class="lvl-2">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li>
<input type="checkbox" id="nav-toggle-3" />
<label for="nav-toggle-3" class="sub"><a>Service 3</a></label>
<ul class="lvl-3">
<li><a href="#">Service 3 a</a></li>
<li><a href="#">Service 3 b</a></li>
</ul>
</li>
<li><a href="#">Service 4</a></li>
</ul>
</li>
<li><a href="/project-gallery">Project Gallery</a></li>
<li><a href="/contact-us">Contact Us</a></li>
</ul>
</nav>
标记与原始标记相比几乎没有修改,因为我发现使用类比使用常规选择器更容易,尤其是在嵌套列表时
它只是CSS(我使用的是SASS+compass)<代码>:选中的伪类用于打开和关闭菜单。我删除了服务的链接,假设它只用于打开子菜单(就内容而言,如果您想在导航中保留该页面,您可以在子菜单中添加“所有服务”之类的内容)
最大的挑战是设计中间断点的样式。根据父列表项(奇数或偶数)的位置,子列表将拉伸到200%(因为父列表的宽度为50%),并定位为从左侧浮动。关于列表宽度的小错误出现在第3级,导致边缘颜色溢出
另外,display:block
和display:none
选择器可以替换为max height
,以添加一些很酷的css动画效果
逻辑很简单,并与此代码相匹配
#submenu,#submenu2,#submenu3{
visibility:hidden; /*turn all the submenus visibility hidden */
}
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2 li.second:hover #submenu3{
visibility:visible; /*On hover turn on visibility visible */
}
完整代码:
HTML:
只要理解这段代码背后的逻辑,就可以创建任意多的子菜单。你能画出你想要的样子吗?子菜单应该呈现在哪里?我想出来了,至少我认为这是你想要的。对于否决这个的人:请留下评论,解释为什么你认为这是一个糟糕的答案。
<nav>
<input type="checkbox" id="nav-toggle-1" />
<label for="nav-toggle-1" class="pull sub"><a>Menu</a></label>
<ul class="lvl-1">
<li><a href="http://www.domain.co.uk/">Homepage</a></li>
<li>
<input type="checkbox" id="nav-toggle-2" />
<label for="nav-toggle-2" class="sub"><a>Services</a></label>
<ul class="lvl-2">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li>
<input type="checkbox" id="nav-toggle-3" />
<label for="nav-toggle-3" class="sub"><a>Service 3</a></label>
<ul class="lvl-3">
<li><a href="#">Service 3 a</a></li>
<li><a href="#">Service 3 b</a></li>
</ul>
</li>
<li><a href="#">Service 4</a></li>
</ul>
</li>
<li><a href="/project-gallery">Project Gallery</a></li>
<li><a href="/contact-us">Contact Us</a></li>
</ul>
</nav>
@import "compass";
/* globals */
* {box-sizing:border-box;}
ul {
margin: 0;
padding: 0;
}
input {
position: absolute;
top: -99999px;
left: -99999px;
opacity: 0;
}
nav {
height: 50px;
background: #F00;
font: 16px/1.5 Arial, sans-serif;
position: relative;
}
a {
color: #FFFFFF;
display: inline-block;
text-decoration: none;
line-height: 50px;
padding: 0 20px;
&:hover,
&:active {
background-color: #000000;
color:#FFFFFF;
}
}
/* nav for +600px screen */
ul.lvl-1 {
text-align: center;
@include pie-clearfix;
li {
display: inline;
}
}
ul.lvl-2,
ul.lvl-3 {
position: absolute;
width: 100%;
background: lighten(red, 15%);
display:none;
}
ul.lvl-3 {background: lighten(red, 30%);}
#nav-toggle-2:checked ~ ul.lvl-2,
#nav-toggle-3:checked ~ ul.lvl-3 {
display: block;
}
.pull {display: none;}
/* arrow thingy - crappy positioning, needs tinkering */
.sub {
position: relative;
cursor: pointer;
&:after {
position: absolute;
top: 40%;
right: 0;
content:"";
width: 0;
height: 0;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-top: 6px solid white;
}
}
/* medium-ish nav */
@media screen and (max-width: 600px) {
nav {height: auto;}
a {
text-align: left;
width: 100%;
text-indent: 25px;
border-bottom: 1px solid #FFFFFF;
}
ul > li {
width: 50%;
float: left;
&:nth-of-type(odd) {
border-right: 1px solid white;
}
}
li:nth-of-type(even) ul.lvl-2,
li:nth-of-type(even) ul.lvl-3 {
position: relative;
width: 200%;
left: -100%;
}
li:nth-of-type(odd) ul.lvl-2,
li:nth-of-type(odd) ul.lvl-3 {
position: relative;
width: 200%;
left: 1px;
}
ul.lvl-2 li {background: lighten(red, 15%);}
ul.lvl-3 li {background: lighten(red, 30%);}
}
/* small-ish nav */
@media only screen and (max-width : 480px) {
.pull {
display: block;
width: 100%;
position: relative;
}
ul {
height: 0;
> li {
width: 100%;
&:nth-of-type(odd) {
border-right: none;
}
}
}
#nav-toggle-1:checked ~ ul.lvl-1 {
height: auto;
}
#nav-toggle-2:checked ~ ul.lvl-2,
#nav-toggle-3:checked ~ ul.lvl-3 {
//reverting stuff from previous breakpoint
left: 0;
width: 100%;
}
}
#submenu,#submenu2,#submenu3{
visibility:hidden; /*turn all the submenus visibility hidden */
}
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2 li.second:hover #submenu3{
visibility:visible; /*On hover turn on visibility visible */
}
<div id="top_menu"> <!--MAIN MENU -->
<ul>
<li class="first">menu1
<div id="submenu"> <!--First Submenu -->
<ul class="abc">
<li class="second">item1
<div id="submenu2"> <!--Second Submenu -->
<ul class="abc">
<li class="second">item1_1
<div id="submenu3"> <!--Third Submenu -->
<ul class="abc">
<li class="second">item1_1_1</li>
<li class="second">item1_1_2</li>
<li class="second">item1_1_3</li>
</ul>
</div> <!--third Submenu Ends here-->
</li>
<li class="second">item1_2</li>
<li class="second">item1_3</li>
</ul>
</div> <!--Second Submenu Ends here-->
</li>
<li class="second">item2
<div id="submenu2">
<ul class="abc">
<li class="second">item2_1</li>
<li class="second">item2_2</li>
<li class="second">item2_3</li>
</ul>
</div>
</li>
<li class="second">item3
<div id="submenu2">
<ul class="abc">
<li class="second">item3_1</li>
<li class="second">item3_2</li>
<li class="second">item3_3</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="first">menu2
<div id="submenu">
<ul class="abc">
<li class="second">item1</li>
<li class="second">item2</li>
<li class="second">item3</li>
<li class="second">item4</li>
</ul>
</div>
</li>
</ul>
</div>
ul{
padding:10px;
padding-right:0px;
}
li.first{
display:block;
display:inline-block;
padding:5px;
padding-right:25px;
padding-left:25px;
cursor:pointer;
}
li.second{
list-style:none;
margin:0px;
padding:5px;
padding-right:25px;
margin-bottom:5px;
cursor:pointer;
}
#submenu li.second:hover{
background:red;
border-radius:5px;
}
#submenu2 li.second:hover{
background:green;
border-radius:5px;
}
/*********MAIN LOGIC***************/
#submenu,#submenu2,#submenu3{
visibility:hidden;
}
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2 li.second:hover #submenu3{
visibility:visible;
}
/**********STYLING SUBMENUS**************/
#submenu{
padding-right:0px;
text-align:left;
position:absolute;
background:white;
box-shadow:0px 0px 5px;
border-radius:5px;
}
#submenu2{
text-align:left;
position:absolute;
left:70px;
top:0px;
background:red;
box-shadow:0px 0px 5px;
border-radius:5px;
}
#submenu3{
text-align:left;
position:absolute;
left:80px;
top:0px;
background:green;
box-shadow:0px 0px 5px;
border-radius:5px;
}