Custom menu using jQuery and CSS

Question

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>

https://jsfiddle.net/fj4Lou7w/

Please post the code which you have tried. If not tried yet, I suggest you to search for vertical navigation bar to get started. — Pugazh
– Pugazh, Commented Apr 12, 2017 at 14:24
Question is too broad. For inspiration visit a site like jqueryscript.net — yezzz
– yezzz, Commented Apr 12, 2017 at 14:25
@SamirChahine brief code added, minus the slide in effect which I'm not sure where to start. I guess it needs to work in a similar wade to a content slider. — Alex
– Alex, Commented Apr 12, 2017 at 14:34

DaniP · Accepted Answer · 2017-04-12 14:51:09Z

Based 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>

How would you do it if there was a third nav, which was shown when you clicked a link in the secondary nav? Also it'd go back to the secondary nav when you click the back button in the third nav.

DodderJs · Accepted Answer · 2017-04-12 14:50:25Z

it 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>

Collectives™ on Stack Overflow

Custom menu using jQuery and CSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related