使用Yamm3为您的网站创建超级菜单

最新推荐文章于 2021-02-03 20:05:27 发布

cune1359

最新推荐文章于 2021-02-03 20:05:27 发布

阅读量190

点赞数

文章标签： java html bootstrap css web ViewUI

在网页上使用megamenu有许多可用性优势。使用megamenu，您可以完全控制菜单 。几乎所有Web元素都可以在那里分配。

一些伟大的公司甚至将megamenu应用于他们的网站。例如， Amazon和Mashable 。亚马逊的菜单中有图像背景，Mashable使用图像缩略图来制作更具吸引力的菜单。

如果您一直在使用Bootstrap ，现在可以使用来自Geedmo的全新库Yamm Swift构建megamenu 。

Yamm3 （ 另一个Megamenu ）是一个CSS库，可帮助您在Bootstrap 3中轻松构建megamenu 。 megamenu适用于响应式和固定式布局 。它涵盖了几乎所有要包含在导航栏中的引导程序元素，例如图片，手风琴，列表，网格，表格，表格等。

基本指南

Yamm3使用轻量级纯CSS。要开始使用Yamm3，只需要将所需的Yamm3类包括在标准导航栏HTML标记中。

在使用Yamm3之前，第一步是将Yamm3和Bootstrap样式表库包含在head部分中，如下所示：

<head>
...
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/bootstrap-theme.min.css" rel="stylesheet">
   <link href="css/yamm.css" rel="stylesheet">
...
</head>

并且不要忘记在头或主体部分中也将jQuery和Bootstrap库包括到您的项目中，如下所示：

...
   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
...

请注意，我们在这里使用Bootstrap 3 ，所需的最低jQuery版本是1.9.0+ 。如果仍在先前的Bootstrap版本上运行，我们建议您遵循先前Yamm版本的指南。

HTML标记

在基本用法中，要使用Yamm3，请首先在导航栏标记的顶部添加.yamm类。然后，您可以将菜单标记添加到.dropdown-menu类中。以下是一个基本示例。

<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"> 
                    <!-- Your Menu Goes Here -->
				  </div>
			   </div>
           </li>
         </ul>
       </li>
     </ul>
...
</nav>

从那里可以看到，您还可以使用.yamm-content作为使用填充来包装内容的选项。

例如，让我们尝试在标记导航栏中添加一个手风琴菜单。用以下代码替换“ 您的菜单转到此处”注释。

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Accordion Group Item #1</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">This is collapsible menu.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Accordion Group Item #2</a></h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">This is collapsible menu.</div>
        </div>
    </div>
</div>

通过调用accordion ID并使用panel-group类进行分组，您可以在导航栏中创建手风琴。因此，我们的菜单如下图所示：

您还可以在导航栏中添加许多其他组件。如果您下载Yamm3完整档案并使用您喜欢的代码编辑器打开index.html文件，则可以对可以实施的其他组件进行自我探索。

Java脚本

在某些组件（例如手风琴，表格等）中，还有一个用于防止意外关闭菜单的附加javascript代码。只需在您的头部或身体部分中包含以下代码即可：

<script>    
$(document).on('click', '.yamm .dropdown-menu', function(e) {
  e.stopPropagation()
})
</script>

结论

Yamm3是另一个很棒的第三方产品，可以在构建吸引人的导航栏时促进Twitter Bootstrap的发展。您只需要花一点精力就可以探索所有实现组件，因为它缺少创建各种组件菜单的文档支持 。

在下面的评论部分中与我们分享您的意见。

翻译自: https://www.hongkiat.com/blog/bootstrap-megamenu-yamm3/