我想设计一个类似[www.digikala.com/]的菜单,但是在响应式设计或引导程序中。我找不到任何示例或模板。你能告诉我一些设计菜单的模板,比如“digikal”菜单。以及这个菜单的名称。
答案 0 :(得分:2)
使用 Yamm3 megamenu
扩展您的引导程序这是指向小部件的链接
http://geedmo.github.io/yamm3/
并像这样使用
<nav class="navbar yamm navbar-default " role="navigation">
...
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
...
</li>
</ul>
</li>
</ul>
...
</nav>
这是工作小提琴
答案 1 :(得分:0)
答案 2 :(得分:0)
我设计了我的超级菜单而没有聘请某人。你可以在这里看到mega menu in three levels
<div class="jumbotron">
<div class="container-fluid">
<!-- Grid demo navbar -->
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid"
class="navbar-toggle">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
<a href="#" class="navbar-brand">buy100</a>
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav" >
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">main menu<b class="caret"></b></a>
<ul class=" navbar-nav dropdown-menu" >
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">menu1<b class="caret"></b></a>
<ul class="dropdown-menu" >
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
<!--With Offsets
-->
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"> menu2<b class="caret"></b></a>
<ul class="dropdown-menu" >
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
<!--Aside Menu
-->
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">menu3<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
<!--Nesting Menu
-->
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">menu4<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li>
<li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li>
<li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li>
</ul>
</div>
</div>
</div>
</div>