- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorPosts
-
April 12, 2017 at 2:21 am #10112alex-daviesParticipant
I’m trying to create a sidebar menu, but I am not sure really where to start.
How I need it to work is in the image below, when the main nav link 1 is clicked, it will slide in the sub nav items from the right that are associated to that selection. Obviously main nav link 2 will have it’s own options too and link 3 could have no sub nav items.
Thanks in advance for any assistance!
Here’s what I have so far:
$(".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>
April 12, 2017 at 2:50 am #10113dodderjsParticipantit is not the best solution, but on hover you can hide, move,… elements in the DOM with CSS like:
[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>
April 12, 2017 at 2:51 am #10114danipParticipantBased on your code and whitout change your markup I have a few suggestions to make simpler your slide-in animation:
- Use position
absolute
for the secondary navs. - Use a class and
transition
to make the slide animation. - Use a reference from your primary buttons to target the right secondary element.
$(".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>
- Use position
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
- You must be logged in to reply to this topic.