如何使用bootstrap创建响应式设计中的大型菜单就像一个例子

时间:2014-11-12 06:02:49

标签: html css3 twitter-bootstrap

我想设计一个类似[www.digikala.com/]的菜单,但是在响应式设计或引导程序中。我找不到任何示例或模板。你能告诉我一些设计菜单的模板,比如“digikal”菜单。以及这个菜单的名称。

3 个答案:

答案 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>

这是工作小提琴

http://jsfiddle.net/DTcHh/1698/

答案 1 :(得分:0)

试试这个链接:

这提供了完整且完整的响应式模板

https://wrapbootstrap.com/

答案 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>