使用jQuery和CSS的自定义菜单

我试图创建一个侧边栏菜单，但我不确定从哪里开始。使用jQuery和CSS的自定义菜单

我需要它的工作方式如下图所示，当点击主导航链接1时，它将滑动到与该选择相关的右导航条目中。显然，主导航链接2也会有自己的选项，链接3可能没有子导航项目。

在此先感谢您的帮助！

这是我到目前为止有：

$(".primary-nav .box").click(function(e) { 
 
    e.preventDefault(); 
 
    $('.primary-nav').addClass('hidden-xs-up') 
 
    $('.secondary-nav').removeClass('hidden-xs-up'); 
 
}); 
 
$(".back-btn").click(function(e) { 
 
    e.preventDefault(); 
 
    $('.secondary-nav').addClass('hidden-xs-up'); 
 
    $('.primary-nav').removeClass('hidden-xs-up'); 
 
});

.sidebar { 
 
    background-color: #434a54; 
 
    height: 500px; 
 
    width: 120px; 
 
    margin: 60px auto; 
 
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2); 
 
} 
 

 
.sidebar .box { 
 
    color: #aab2bd; 
 
    display: block; 
 
    text-align: center; 
 
    border-bottom: 1px solid #656d78; 
 
    padding: 20px 10px; 
 
    text-decoration: none !important; 
 
    transition: .2s; 
 
} 
 

 
.sidebar .box:hover { 
 
    background-color: #4a89dc; 
 
    color: #f5f7fa; 
 
} 
 

 
.sidebar .nav-icon { 
 
    font-size: 30px; 
 
    display: block; 
 
    margin-bottom: 5px; 
 
} 
 

 
.sidebar .back-btn { 
 
    background-color: #4a89dc; 
 
    color: #f5f7fa; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="sidebar"> 
 
     <div class="primary-nav"> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary 
 
      </a> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary 
 
      </a> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary 
 
      </a> 
 
      <a href="#" class="box"> 
 
       More <i class="fa fa-ellipsis-h" aria-hidden="true"></i> 
 
       </a> 
 
     </div> 
 
     <div class="secondary-nav hidden-xs-up"> 
 
      <a href="#" class="box back-btn"> 
 
      <i class="fa fa-arrow-left" aria-hidden="true"></i> Back 
 
      </a> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary 
 
      </a> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary 
 
      </a> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/fj4Lou7w/

来源

2017-04-12 Alex Davies

那么你尝试过什么？有任何代码显示？ –

请发布您尝试过的代码。如果尚未尝试，我建议您搜索“垂直导航栏”开始。 – Pugazh

问题太广泛。对于灵感访问一个网站，如jqueryscript.net – yezzz

基于您的代码和whitout更改您的标记我有几个建议，使简单的滑入动画：

的二次利用位置absolute资产净值。
使用一个类和transition来制作幻灯片动画。
使用主按钮中的引用来定位右侧的次要元素。

$(".primary-nav .box").click(function(e) { 
 
    e.preventDefault(); 
 
    var targ = $(this).attr('href'); 
 
    $(targ).addClass('showsub'); 
 
}); 
 
$(".back-btn").click(function(e) { 
 
    e.preventDefault(); 
 
    $('.secondary-nav').removeClass('showsub'); 
 
});

.sidebar { 
 
    position:relative; 
 
    background-color: #434a54; 
 
    height: 500px; 
 
    width: 120px; 
 
    margin: 60px auto; 
 
    overflow:hidden; 
 
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2); 
 
} 
 

 
.sidebar .box { 
 
    color: #aab2bd; 
 
    display: block; 
 
    text-align: center; 
 
    border-bottom: 1px solid #656d78; 
 
    padding: 20px 10px; 
 
    text-decoration: none !important; 
 
    transition: .2s; 
 
} 
 

 
.sidebar .box:hover { 
 
    background-color: #4a89dc; 
 
    color: #f5f7fa; 
 
} 
 

 
.sidebar .nav-icon { 
 
    font-size: 30px; 
 
    display: block; 
 
    margin-bottom: 5px; 
 
} 
 

 
.sidebar .back-btn { 
 
    background-color: #4a89dc; 
 
    color: #f5f7fa; 
 
} 
 

 
.secondary-nav { 
 
    position:absolute; 
 
    z-index:10; 
 
    left:100%; 
 
    top:0; 
 
    width:100%; 
 
    background-color: #434a54; 
 
    transition:left .2s linear; 
 
} 
 
.secondary-nav.showsub { 
 
left:0; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="sidebar"> 
 
     <div class="primary-nav"> 
 
      <a href="#sec1" class="box"> 
 
      <i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary1 
 
      </a> 
 
      <a href="#sec2" class="box"> 
 
      <i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary2 
 
      </a> 
 
      <a href="#" class="box"> 
 
       More <i class="fa fa-ellipsis-h" aria-hidden="true"></i> 
 
       </a> 
 
     </div> 
 
     <div class="secondary-nav" id="sec1"> 
 
      <a href="#" class="box back-btn"> 
 
      <i class="fa fa-arrow-left" aria-hidden="true"></i> Back 
 
      </a> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary 
 
      </a> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary 
 
      </a> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary 
 
      </a> 
 
     </div> 
 
     <div class="secondary-nav" id="sec2"> 
 
      <a href="#" class="box back-btn"> 
 
      <i class="fa fa-arrow-left" aria-hidden="true"></i> Back 
 
      </a> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2 
 
      </a> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2 
 
      </a> 
 
      <a href="#" class="box"> 
 
      <i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-04-12 14:51:09 DaniP

这很完美 - 非常感谢！ –

如果有第三个导航栏，您在辅助导航栏中点击了一个链接时显示，你会怎么做？当你点击第三个导航栏中的后退按钮时，它也会返回到辅助导航栏。 –

它不是最好的解决办法，但悬停你可以隐藏，移动， ... DOM中的CSS元素： [

body { 
 
    font-family: Arial; 
 
    padding: 40px; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    position: relative; 
 
    width: 60px; 
 
} 
 
ul.submenu { 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 120px; 
 
    transition: all 400ms ease-in-out; 
 
} 
 
ul li { 
 
    border-top: 1px solid white; 
 
} 
 
ul li a { 
 
    display: block; 
 
    background-color: #434a54; 
 
    text-align: center; 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 20px 0; 
 
} 
 
ul li:hover .submenu { 
 
    opacity: 1; 
 
    left: 61px; 
 
}

<ul class="mainmenu"> 
 
    <li> 
 
    <a href="#menu1">Menu1</a> 
 
    <ul class="submenu"> 
 
     <li><a href="#menu1Link1">Link1</a></li> 
 
     <li><a href="#menu1Link2">Link2</a></li> 
 
     <li><a href="#menu1Link3">Link3</a></li> 
 
     <li><a href="#menu1Link4">Link4</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#menu2">Menu2</a> 
 
    <ul class="submenu"> 
 
     <li><a href="#menu1Link1">Link1</a></li> 
 
     <li><a href="#menu1Link2">Link2</a></li> 
 
     <li><a href="#menu1Link3">Link3</a></li> 
 
     <li><a href="#menu1Link4">Link4</a></li> 
 
    </ul></li> 
 
    <li><a href="#menu3">Menu3</a> 
 
    <ul class="submenu"> 
 
     <li><a href="#menu1Link1">Link1</a></li> 
 
     <li><a href="#menu1Link2">Link2</a></li> 
 
     <li><a href="#menu1Link3">Link3</a></li> 
 
     <li><a href="#menu1Link4">Link4</a></li> 
 
    </ul></li> 
 
    <li><a href="#menu4">Menu4</a> 
 
    <ul class="submenu"> 
 
     <li><a href="#menu1Link1">Link1</a></li> 
 
     <li><a href="#menu1Link2">Link2</a></li> 
 
     <li><a href="#menu1Link3">Link3</a></li> 
 
     <li><a href="#menu1Link4">Link4</a></li> 
 
    </ul></li> 
 
</ul>

来源

2017-04-12 14:50:25 DodderJs

使用jQuery和CSS的自定义菜单

回答

相关问题