Html 超大菜单响应导航帮助（无引导）_Html_Css_Navigation_Navbar_Megamenu

Html 超大菜单响应导航帮助（无引导）

html css navigation

Html 超大菜单响应导航帮助（无引导）,html,css,navigation,navbar,megamenu,Html,Css,Navigation,Navbar,Megamenu,我正在尝试使用纯html/css创建一个非常通用的超级菜单，而不使用引导（由于某些原因，没有在线教程，所以我自己制作一个）。我已经成功地设计了我的导航，并且它工作得很好，但是我不知道如何让手机版本给我一个菜单选项，而不是像现在这样提供所有的链接。我将在下面发布代码，如果有人能告诉我要添加什么来实现它，那就太棒了 <div class="menu style"> <ul class="menu"> <!-- Mega M

我正在尝试使用纯html/css创建一个非常通用的超级菜单，而不使用引导（由于某些原因，没有在线教程，所以我自己制作一个）。我已经成功地设计了我的导航，并且它工作得很好，但是我不知道如何让手机版本给我一个菜单选项，而不是像现在这样提供所有的链接。我将在下面发布代码，如果有人能告诉我要添加什么来实现它，那就太棒了

<div class="menu style">
            <ul class="menu">
            <!-- Mega Menu start. copy section between comments to create new heading-->
                <li><a href="#">Option 1</a>
                    <div class="mega-menu">
                        <div class="col-1">
                            <h4>Header 1</h4>
                                <ol>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                </ol>
                        </div>
                        <div class="col-1">
                            <h4>Header 2</h4>
                                <ol>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                </ol>
                        </div>
                        <div class="col-1">
                            <h4>Header 3</h4>
                                <ol>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                </ol>
                        </div>
                         <div class="col-1">
                            <h4>Header 4</h4>
                                <ol>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                </ol>
                        </div>
                    </div>
                    <li><a href="#">Option 2</a>
                    <div class="mega-menu">
                        <div class="col-1">
                            <h4>Header 1</h4>
                                <ol>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                </ol>
                        </div>
                        <div class="col-1">
                            <h4>Header 2</h4>
                                <ol>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                </ol>
                        </div>
                        <div class="col-1">
                            <h4>Header 3</h4>
                                <ol>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                </ol>
                        </div>
                    </div>
                    <li><a href="#">Option 3</a>
                    <div class="mega-menu">
                        <div class="col-1">
                            <h4>Header 1</h4>
                                <ol>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                </ol>
                        </div>
                        <div class="col-1">
                            <h4>Header 2</h4>
                                <ol>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                </ol>
                        </div>
                        <div class="col-1">
                            <h4>Header 3</h4>
                                <ol>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                    <li><a href="#">Content</a></li>
                                </ol>
                        </div>
                    </div></ul></div>

这里有一个链接到一个代码笔，我也用它做的

现在用于定义您的

.mega菜单

位置

静态

像这样

@media only screen and (max-width: 767px){
  .menu li:hover .mega-menu{position:static;}
}

演示

@font-face{
字体系列：“raleway”；
src:url（font/ralway/ralway.ttf）格式（'truetype'）；
src:url（font/ralway/ralway.otf）格式（'opentype'）；
src:url（font/ralway/ralway.woff）格式（'woff'）；
}
.菜单{
显示：块；
位置：相对位置；
}
.menu，.menu ul{
边距：0；填充：0；
列表样式：无；
职位：相对
}
.menu ul a{float:left}
.菜单.大菜单a{
浮动：无；
填充：0
}
.menu.mega menu.menu.mega menu ol li{
不透明度：0；
可见性：隐藏；
显示：无！重要/9；
}
.menu li:hover>.mega menu、.menu li:hover>.mega menu ol li{
不透明度：1；
能见度：可见；
显示：阻止！重要/9
}
.菜单：之后{
内容：“；
明确：两者皆有；
显示：块}
李先生{
浮动：左；
}
/*主标题css*/
.菜单ul li a{
显示：块；
填充：14px 20px 15px 20px；
字体系列：'raleway'，arial，无衬线；
颜色：#fff；
字体大小：1.1米；
字体大小：粗体；
文本装饰：无
}
/*下拉部分css*/
.大菜单{
位置：绝对位置；
最高：100%；
填充：18px 11px；
背景色：rgba（0,0,0,8）
}
.mega menu ol{
列表样式：无；
填充：0
}
.mega菜单ol li{宽度：100%；}
/*下拉部分文本css*/
.MEGAMEGAMENUOLLIA{
字体大小：.9em；
线高：18px；
}
.mega menu ol li:悬停.mega menu ol li a{
颜色：#fff；
填充：0；
背景图像：无
}
/*子标题css*/
.mega menu div h4{
字体系列：'raleway'，arial，无衬线；
字号：1.15em；
字体大小：粗体；
颜色：#f7b50d；
边框底部：1px实心#e4；
填充：0 0 8px 0；
利润率：0 10px 0
}
.mega menu.col-1{宽度：135px}
.mega菜单，第1列{
浮动：左；
利润率：0.9px
}
@仅介质屏幕和（最大宽度：767px）{
李先生{
宽度：100%；
}
.menu li:hover.mega菜单{position:static；}
.menu ul li{位置：相对}
.menu.mega menu ol li{高度：0}
.menu li:hover>.mega menu ol li{height:auto}
.mega菜单，.menu ul ul{z-index:100}
.mega菜单{填充：18px 0}
.mega menu ol li:最后一个子项{边距：0 0 10px 0}
.menu.col-1{
浮动：左；
边距：05%；宽度：90%
}
} 
/*也是主标题css*/
.style.menu、.style-1.menu ul li{
背景色：#333；
边框顶部：1px实心#f7b50d；
边框底部：1px实心#f7b50d；
} 
.style.菜单ul li a:悬停{
颜色：#f7b50d；
}




标题1





标题2





标题3





标题4






标题1





标题2





标题3






标题1





标题2





标题3

使用移动屏幕下的汉堡包菜单更新您的代码，使下拉菜单

静态

定位为不会与其他菜单重叠

查看这个片段。运行这两个大屏幕和小屏幕。我想这就是你要找的

jQuery（函数（$）{
$（'.menu btn'）。单击（函数（）{
$（'.menu.style'）.toggleClass（“打开”）；
})
})

@font-face{
字体系列：“raleway”；
src:url（font/ralway/ralway.ttf）格式（'truetype'）；
src:url（font/ralway/ralway.otf）格式（'opentype'）；
src:url（font/ralway/ralway.woff）格式（'woff'）；
}
.菜单{
显示：块；
位置：相对位置；
}
.菜单，
.菜单ul{
保证金：0；
填充：0；
列表样式：无；
职位：相对
}
.菜单ul a{
浮动：左
}
.菜单.大菜单a{
浮动：无；
填充：0
}
.菜单.大菜单，
.menu.mega menu ol li{
不透明度：0；
可见性：隐藏；
显示：无！重要/9；
}
.menu li:hover>.mega menu，
.menu li:hover>.mega menu ol li{
不透明度：1；
能见度：可见；
显示：阻止！重要/9
}
.菜单：之后{
内容：“；
明确：两者皆有；
显示：块
}
李先生{
浮动：左；
}
/*主标题css*/
.菜单ul li a{
显示：块；
填充：14px 20px 15px 20px；
字体系列：
@media only screen and (max-width: 767px){
  .menu li:hover .mega-menu{position:static;}
}