rahmatullaah
Day 3- Not too intense for finesse.

Day 3- Not too intense for finesse.

ibraheem Rahmatullah's photo
ibraheem Rahmatullah
·

3 min read

Hi again!

So today, I added a bit of finesse to my boring navbar using Jquery.

Thanks to W3C, I didn't have to bug much on how to go about the code.

The Jquery API simplifies DOM access so it's a personal fav.

Today, I added the slideToggle() effect to some navbar elements. Easy but hey, the finesse is to be reckoned with I tell you.

Shall we?

1. I began by assigning new id's to the elements on my navbar

In order to make things clearer, I assigned unique ids specifically for the elements that'll be in use.

Observe the id's in the snippet below

  <button class="btn btn-default dropdown-toggle" 
type="button" id="dropdownMenu2" data-toggle="dropdown" 
aria-haspopup="true" aria-expanded="true">
      Learners' Corner
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="menu">
      <li><a href="#">Log in</a></li>
      <li><a href="#">Sign up</a></li>  
    </ul>
  </div>

   <div class="dropdown" >
    <button class="btn btn-default dropdown-toggle" 
type="button" id="dropdownMenu3" 
data-toggle="dropdown" 
aria-haspopup="true" aria-expanded="true">
     Resources
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="menus">
      <li><a href="#">Ebooks</a></li>
      <li><a href="#">Cheat Sheets</a></li>
      <li><a href="#">Audio conversations</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Blog</a></li>
    </ul>
  </div>

2. Next, is the code for each button using jquery

The code includes the selector (#) to specify which element to effect; the speed parameter (fast, slow, milliseconds) which specifies the duration of the effect, and the method to be implemented, in this case- slideToggle().

In this case, once the document loads, the function listens for a hover on the selected element(s) and applies the effect immediately.

See snippet below

$(document).ready(function(){
    $("#dropdownMenu2").hover(function(){
      $("#menu").slideToggle("fast");
    });
  });


  $(document).ready(function(){
    $("#dropdownMenu3").hover(function(){
      $("#menus").slideToggle("fast");
    });
  });

Done!

That was easy peasy and rewarding at the same time!

Thank you so much for reading and please let me know what you think!

See you tomorrow!

jQueryJavaScriptCSS