Easy jQuery Dropdown Menu with attractive CSS

Home » Javascript/Jquery » Easy jQuery Dropdown Menu with attractive CSS

Saturday, November 23, 2013

Easy jQuery Dropdown Menu with attractive CSS

Saturday, November 23, 2013 by Unknown

Hiiii, nowadays many dropdown menus are available in market which you can implement on your website but sometimes they are not easy to implement and sometimes managing CSS for that dropdown are so difficult. One major thing more that you will find very less websites on internet without a dropdown menu. Dropdown allows you to manage the links on you website in a very attractive way and in a very organized way. So here in this post , I will be telling you how to implement an attractive Dropdown in a very easy way with a feature of giving links to all the menu items.

DROPDOWN MENU DEMO VIEW :

DROPDOWN MENU CODE BEGINS :



<html>
<head>
 <title>Simple Dropdown</title>
 <script src="http://code.jquery.com/jquery.js"></script>
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>

<body>
<div style="width:50%; height:30%; border:2px solid #DDDDDD; margin-left:20px; margin-top:20px;">
 <h1>&nbsp;Simple Dropdown Tutorial</h1>
 
<div class="bs-example" style="margin-left:10px;">
      <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" role="button" id="drop4">Dropdown <b class="caret"></b></a>
          <ul aria-labelledby="drop4" role="menu" class="dropdown-menu" id="menu1">
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Action</a></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Another action</a></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Something else here</a></li>
            <li class="divider" role="presentation"></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Separated link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" role="button" id="drop5">Dropdown 2 <b class="caret"></b></a>
          <ul aria-labelledby="drop5" role="menu" class="dropdown-menu" id="menu2">
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Action</a></li>
            <li class="divider" role="presentation"></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Separated link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" role="button" id="drop6">Dropdown 3 <b class="caret"></b></a>
          <ul aria-labelledby="drop6" role="menu" class="dropdown-menu" id="menu3">
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Menu Item 1</a></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Menu Item 2</a></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Menu Item 3</a></li>
            <li class="divider" role="presentation"></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Menu Item 4</a></li>
          </ul>
        </li>
      </ul> <!-- /tabs -->
    </div>
</div>

</body>
</html>

Hope you like this post……..Please Comment…………!!!!!!!!!

Tags: HTML , Javascript/Jquery

MyCodeStock

Saturday, November 23, 2013