显示图标按钮的子菜单

时间:2015-07-02 21:07:17

标签: html css

我尝试创建导航菜单。有些项目应该有一个子菜单,点击/悬停箭头图标即可显示。

但是我在正确定位子菜单时遇到了一些问题

JSFiddle: http://jsfiddle.net/g651mwdu/

<nav>
    <div class="nav-button-group">  <span class="nav-button-group-title">Title</span>

        <div class="nav-button-container"> <span class='fa fa-plus button-icon'></span>
 <span class="button-text">Add</span>

            <div class="button-arrow-down"></div>
            <div class="submenu">Show some more elements</div>
        </div>
        <div class="nav-button-container"> <span class='fa fa-cog button-icon'></span>
 <span class="button-text">Change</span>

            <div class="button-arrow-down"></div>
        </div>
        <div class="nav-button-container"> <span class='fa fa-link button-icon'></span>
 <span class="button-text">Link</span>

        </div>
        <div class="nav-button-container"> <span class='fa fa-comment-o button-icon'></span>
 <span class="button-text">Tooltip</span>

        </div>
        <div class="nav-button-container"> <span class='fa fa-trash-o button-icon'></span>
 <span class="button-text">Remove</span>

        </div>
    </div>
</nav>

CSS

.nav-button-container {
    display: inline-block;
    width: 2em;
    height: 2.5em;
    padding: .25em;
    text-align: center;
    color: #555;
}
.button-text {
    display: block;
    font-size: .5em;
    margin: .5em 0;
}
.button-icon {
    vertical-align: middle;
    font-size: 1.3em;
}
.button-arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #B4B4B4;
    margin: 0 auto;
}
.line-separator {
    display: inline-block;
    width: 1em;
}
nav {
    background-color: #f2f2f2;
    padding: .3em 0;
    border-radius: 7px;
}
.nav-button-group {
    display: inline-block;
    background-color: #fafafa;
    padding: .3em;
    border-radius: 5px;
}
.nav-button-group-title {
    display: block;
    font-weight: bold;
    font-size: .7em;
    color: #555;
    padding: 0 .5em;
    background-color: #F2F2F2;
    border-radius: 4px;
}

1 个答案:

答案 0 :(得分:0)

这是你想要实现的目标(使用与下拉文本对齐的字体真棒图标导航)?

您正在使用按钮来构建您的菜单,这是不必要的(或推荐)。使用ul 无序列表和列出项li来构建导航。然后插入图标非常简单。

<li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a>

示例代码段

&#13;
&#13;
.navbar {
  border-radius: 0px;
}
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px 6px 6px 6px;
  border-radius: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}
.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0px 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0px 6px 6px;
  -moz-border-radius: 6px 0px 6px 6px;
  border-radius: 6px 0px 6px 6px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-inverse">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button> <a href="#" class="navbar-brand">Brand</a>

  </div>
  <!-- Collection of nav links, forms, and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a>

      </li>
      <li><a href="#">Profile</a>

      </li>
      <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>

        <ul role="menu" class="dropdown-menu">
          <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a>

          </li>
          <li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a>

          </li>
          <li><a href="#"><i class="fa fa-paper-plane-o  fa-fw"></i> Sent Items</a>

          </li>
          <li class="divider"></li>
          <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a>

          </li>
        </ul>
      </li>
      <li><a href="#">Hello</a>

      </li>
      <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a>

        <ul role="menu" class="dropdown-menu">
          <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a>

          </li>
          <li><a href="#"><i class="fa fa-pencil-square-o  fa-fw"></i> Drafts</a>

          </li>
          <li><a href="#"><i class="fa fa-paper-plane-o  fa-fw"></i> Sent Items</a>

          </li>
          <li class="divider"></li>
          <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a>

            <li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a>

              <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a>

                </li>
                <li><a tabindex="-1" href="#"><i class="fa fa-folder-open-o  fa-fw"></i> Users</a>

                </li>
                <li><a tabindex="-1" href="#"><i class="fa fa-file-o fa-fw"></i> Login</a>

                </li>
              </ul>
            </li>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Login</a>

      </li>
    </ul>
  </div>
</nav>
&#13;
&#13;
&#13;