如何在響應式CSS菜單上添加子菜單
[英]how to add sub menus on a responsive css menu
問題描述
我的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>
<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>
nav {
height: 50px;
width: 100%;
background: #F00;
font-size: 14pt;
font-family: Arial;
position: relative;
border-bottom: 5px solid #FFFFFF;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 100%;
height: 50px;
text-align: center;
}
nav li {
display: inline;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #FFFFFF;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 50px;
}
nav li a {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding-left: 10px;
padding-right: 10px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #000000;
color:#FFFFFF;
}
nav a#pull {
display: none;
}
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
color:#FFFFFF;
background-color: #F00;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
rightright: 15px;
top: 10px;
}
}
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
}
}
我正在尋找一種方法來添加子菜單，然后在第一個子菜單上添加第二個子菜單，但仍保持其響應性。
我怎樣才能做到這一點？
5 個解決方案
解決方案1
3 2013-10-26 07:57:24
JSFIDDLE DEMO邏輯很簡單，並且具有此代碼
#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：
<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>
CSS：
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;
}
只需了解此代碼背后的邏輯，您就可以根據需要創建任意數量的子菜單。
解決方案2
2 2013-10-20 17:51:09
有很多方法可以解決這個問題。
我通常用display: none隱藏子菜單ul並將它們從position: absolute的內容流中取出。 給li包含子菜單position: relative以使子菜單相對於它們的直接父項，然后使用top ， right ， bottom和left屬性定位子菜單。 最后，更改子菜單以display: block通過:hover或其他。
這是一個簡單的例子：
標記：
<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>
CSS：
nav li {
position: relative;
}
nav li > ul {
position: absolute;
top: 100%;
display: none;
}
nav li:hover > ul {
display: block;
}
這是一個用這個例子的筆 。 它看起來像垃圾，但你得到了演習。
您可以繼續嵌套更多子菜單，但您可能希望對二級和更低級別的子菜單使用不同的定位。
但請注意，移動瀏覽器並不支持:hover 。 至少他們不會對待它。 您不應僅在:hover訪問子菜單:hover 。 考慮在點擊時使用javascript添加某種類名稱切換。
解決方案3
2 2013-10-21 14:12:38
如果您詢問如何使id菜單具有菜單功能或只是主導航的子菜單，我不是100％確定。
如果它與主導航的子菜單有關，那么這將正常工作。 如果是移動菜單，請告訴我，我會為您解決問題。 （解決了）
這個小提琴有子菜單工作，同時仍然響應整個時間。 您可以根據自己的需求設計樣式，但這是一個堅實的開端。
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;
}
這是移動導航工作，最大的問題是你沒有選擇jQuery庫為小提琴運行。
HTML
<div id="pull"><span>Menu</span>
</div>
CSS
div span {
color: #FFFFFF;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 50px;
padding-left: 10px;
padding-right: 10px;
}
我將id pull更改為div，因為當它是錨標記時，所有導航都會丟失其文本顏色。
我已經做了一個下拉列表，同時仍然有響應！ 在這個jsfiddle占據一席之地。
解決方案4
2 2013-10-22 20:35:36
在css中使用hover如：
a:hover
或者如果你的div id是“div1”：
#div1:hover
解決方案5
2 2013-10-25 11:51:51
這是我的看法： http ： //codepen.io/teodragovic/pen/rmviJ
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>
CSS
@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%;
}
}
標記很少從原始修改，因為我發現使用類比一般選擇器更容易，特別是在嵌套列表時。
它只是CSS（我正在使用SASS +指南針）。 :checked偽類用於打開和關閉菜單。 我刪除了服務鏈接，假設它只用於打開子菜單（內容方面，如果你想在導航中保留該頁面，你總是可以在子菜單中添加類似“所有服務”的東西）。
最大的挑戰是造型中斷點。 根據父列表項的位置（奇數或偶數），子列表被拉伸到200％（因為父級是50％寬）並且定位為從左側浮動。 第3級出現關於列表寬度的小錯誤，導致邊緣出現顏色滲色。
另外， display: block和display:none選擇器可以用max-height替換來添加一些很酷的css動畫效果
將子子菜單添加到帶有子菜單的 CSS 菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.