大佬教程收集整理的这篇文章主要介绍了html – 如何在响应式css菜单上添加子菜单,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<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; } }
我正在寻找一种方法来添加子菜单,然后在第一个子菜单上添加第二个子菜单,但仍保持其响应性.
我怎样才能做到这一点?
#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,#submenu3{ visibility:hidden; } #top_menu li.first:hover #submenu,#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; }
只需了解此代码背后的逻辑,您就可以根据需要创建任意数量的子菜单.
以上是大佬教程为你收集整理的html – 如何在响应式css菜单上添加子菜单全部内容,希望文章能够帮你解决html – 如何在响应式css菜单上添加子菜单所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。