如何向下導航到Google nexus菜單
[英]how to make navigation down to google nexus menu
問題描述
我的頁面頂部有一個看起來像google nexus 7的菜單！ 我在頁面中間有另一個導航菜單。 當我單擊Google菜單時，它會出現在導航菜單下。 如何在導航菜單上顯示它？
這是我的代碼：
<body>
<div id="page">
<div id="header">
<div class="container">
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="جستجو" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li>
<a class="gn-icon gn-icon-download">دانلود</a>
</li>
<li><a class="gn-icon gn-icon-article">اخبار</a></li>
<li><a class="gn-icon gn-icon-pictures">عکس ها</a></li>
<li><a class="gn-icon gn-icon-cog">مدیریت</a></li>
<li><a class="gn-icon gn-icon-help">راهنمای سایت</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li><a class="login-page" href="http://tympanus.net/codrops">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>حساب کاربری</a></li>
<li><a class="login-page" href="http://tympanus.net/Development/HeaderEffects/">
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span><span>تماس با ما</span></a></li>
</ul>
</div><!-- /container -->
</div> <!-- /header -->
<div id="wrapper">
<div class="container" id="main-container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- /container -->
</div> <!-- /wrapper -->
</div> <!-- /page -->
1 個解決方案
解決方案1
0 已采納 2014-12-31 17:38:24
沒有CSS很難說出100％，但這似乎是z-index問題。 嘗試將z-index增大到一個較高的數字：
z-index: 1000000; //some high number
如何制作導航菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.