带有垂直子菜单的水平响应菜单 [英] Horizontal Responsive Menu with submenu into vertical
本文介绍了带有垂直子菜单的水平响应菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
多年来,我一直使用带有子菜单的简单水平 css 菜单.我尝试修改它以实现响应式转换.
<头><风格>身体 {边距:0;}ul{padding-left: 0;}.容器 {显示:内联块;光标:指针;}.bar1、.bar2、.bar3 {宽度:35px;高度:5px;背景颜色:#BDF1A5;边距:6px 0;过渡:0.4s;}.change .bar1 {-webkit-transform: 旋转 (-45deg) 平移 (-9px, 6px);变换:旋转(-45度)平移(-9px,6px);}.change .bar2 {不透明度:0;}.change .bar3 {-webkit-transform:旋转(45度)平移(-8px,-8px);变换:旋转(45度)平移(-8px,-8px);}.menu_deroulant {填充:0;边距:0;列表样式:无;文本对齐:居中;背景颜色:#534D4D;字体大小:0;}.menu_deroulant li {向左飘浮;显示:内联块;位置:相对;字体大小:12px;}.menu_deroulant {字体系列:Candara;字体大小:中等;字体粗细:粗体;显示:块;宽度:180px;高度:50px;行高:50px;文本对齐:居中;背景颜色:#534D4D;}.menu_deroulant a:visited, .menu_deroulant a:link {颜色:#BDF1A5;文字装饰:无;}.menu_deroulant a:悬停{背景色:#897E7E;}.menu_deroulant li.icon {显示:无;}.menu_deroulant ul {左:-999em;位置:绝对;}.menu_deroulant li:hover >ul{左:0;}@media 屏幕和 (max-width:680px) {ul.menu_deroulant li:not(:first-child) {显示:无;}ul.menu_deroulant li.icon {浮动:对;显示:内联块;}}@media 屏幕和 (max-width:680px) {ul.menu_deroulant.responsive {位置:相对;}ul.menu_deroulant.responsive li.icon {位置:绝对;右:0;顶部:0;}ul.menu_deroulant.responsive li {浮动:无;显示:内联;}ul.menu_deroulant.responsive li a {显示:块;文本对齐:左;}}</风格>头部><身体><ul class="menu_deroulant" id="myTopnav"><li><a class="active" href="#home">Home</a></li><li><a href="#">Réalisations</a><ul><li><a href="/Realisations-Site-Web.aspx" title="Réalisations de Site Web">Réalisations de Site Internet</a></li><li><a href="/Realisations-Intranet.aspx" title="Réalisations d'Intranet et de développement">Réalisations d'Intranet</a></li><li><a href="#contact">联系方式</a></li><li><a href="#about">关于</a></li><div class="container" onclick="myFunction(this)"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div>
<脚本>函数 myFunction(y) {y.classList.toggle("更改");var x = document.getElementById("myTopnav");if (x.className === "menu_deroulant") {x.className += "响应式";} 别的 {x.className = "menu_deroulant";}}