CODEWITHSUNDEEP
jqueryhtmlcss
Raymond
Raymond

Reputation: 69

Mobile dropdown menu slidedown

I've been building my first real website for a few days now and I solved several problems but I'm stuck now at the mobile dropdown menu.

Here is the website: www.biblio-tech.nl

I want the list items to slide down inside the menu and the rest of the the menu to slide accordingly.





$(document).ready(function(){
    $("#li1").click(function(){
        $(".dd1").slideToggle("fast");
		$('.dd2').slideUp();
    });
		$("#li2").click(function(){
			$(".dd2").slideToggle("fast");
			$('.dd1').slideUp();
		});
			$('.bgOverlay').click(function () {
			  $('.dd1').slideUp();
			  $('.dd2').slideUp();
			  $('ul').slideUp();
			});	

});


$(document).ready(function(){
    $("#nav-toggle").click(function(){
        $("ul").slideToggle(1);
		$('.dd1').slideUp();
		$('.dd2').slideUp();
    });
});


.navbar {
  position: fixed;
  height: 3em;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1;
}

.navbar ul {
  position: relative;
  display: none;
  top: 100%;
  right:-20%;
  height: 0;
  list-style: none;
  font-size: 160%;
}

.navbar ul li {
  position: relative;
  width: 60%;
  background-color: rgba(0,0,0,0.5);
  border-top: none;
  text-indent: 10px;
  color: gray;
  border-bottom: 1px solid rgba(254,254,254,0.1);
}

.navbar ul li:hover {
  background-color: rgba(0,0,0,0.6);
}

.navbar ul li a{
  text-decoration: none;
  color: rgba(254,254,254,1);
  font-weight: 100;
}	

.navbar ul ul ul, .navbar ul ul ul li {
  display: none;
}

.navbar ul ul, .navbar ul ul li {
  position: relative;
  font-size: 100%;
  background-color: rgba(0,0,0,0);
}


li:last-child {
  border-radius: 0px 0px 10px 10px;
}

li:first-child {
  border-top: 1px solid rgba(254,254,254,0.3);
}

.dd1 {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.dd1 li {
  font-size: 100%;
  background-color: rgba(0,0,0,0)
}

.dd2 {
  display: none;
  position: relative;
  width: 100%;
  height: 20%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1;
}

#nav-toggle { 
  position: absolute;
  right: 10px;
  top: 25%; 
}

#nav-toggle {
  cursor: pointer; 
  padding: 10px 35px 16px 0px;
  z-index: 5;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 35px;
  background: rgba(254,254,254,0.9);
  position: absolute;
  display: block;
  content: '';
  opacity: 0.9;
}

#nav-toggle span:before {
  top: -10px; 
}

#nav-toggle span:after {
  bottom: -10px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="navbar">
  <a id="nav-toggle"><span></span></a>
  <ul>
    <li id="li1"><a href="3d.html">3d printing</a>
      <ul>
        <div class="dd1">
          <li><a href="#">blueprints</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
            </ul>
          </li>

          <li><a href="#">information</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis.</li>
            </ul>
          </li>

          <li class="noTransition"><a href="#">Software</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. </li>
            </ul>
          </li>
        </div>

      </ul>
    </li>

    <li id="li2"><a href="#">computing</a>
      <ul>
        <div class="dd2">
          <li><a href="#">hardware</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu.</li>
            </ul>
          </li>

          <li><a href="#">information</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis.</li>
            </ul>
          </li>

          <li class="noTransition"><a href="#">software</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. </li>
            </ul>
          </li>
        </div>	
      </ul>
    </li>

    <li><a href="#">virtual</a></li>
  </ul>
</div>

Upvotes: 1

Views: 184

Answers (1)

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

try with this below updated code it may help you.

$("#nav-toggle").click(function(){
  event.preventDefault();
  $("#dropMenu").toggle();
})
$(".level1-menu > li > a").on("click",function(){
  event.preventDefault();
  $(this).siblings(".level2-menu").toggle(".level2-menu");
});
$(".level2-menu > li > a").on("click",function(){
  event.preventDefault();
  $(this).siblings(".level3-menu").toggle(".level3-menu");
});
.navbar {
  position: fixed;
  height: 3em;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
}
#nav-toggle { 
  position: absolute;
  right: 10px;
  top: 25%; 
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 35px;
  background: rgba(254,254,254,0.9);
  position: absolute;
  display: block;
  content: '';
  opacity: 0.9;
}

#nav-toggle span:before {
  top: -10px; 
}

#nav-toggle span:after {
  bottom: -10px;
}
#dropMenu{
  display : none;
  position: relative;
  width: 60%;
  background-color: rgba(0,0,0,0.5);
  top: 100%;
  right: -20%;
  padding: 0;
  transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

#dropMenu li{
  list-style-type : none;
}
#dropMenu ul{
  padding : 5px;
}


ul.level1-menu  li a {
    text-decoration: none;
    color: rgba(254,254,254,1);
    font-weight: 100;
    font-size: 160%;
}
.level2-menu,.level3-menu{
  display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="navbar">
  <a id="nav-toggle"><span></span></a>
  <div id="dropMenu">
    <ul class="level1-menu">
      <li><a href="3d.html">3d printing</a>
        <ul class="level2-menu">
          <li><a href="3d.html">blueprints</a>
            <ul class="level3-menu">
              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">CSS</a>
      
      <ul class="level2-menu">
          <li><a href="3d.html">blueprints</a>
            <ul class="level3-menu">
              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
            </ul>
          </li>
        </ul>
      
      </li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>



</div>

Upvotes: 1

Related Questions