Blogs Hub

by AskGif | Aug 26, 2019 | Category :coding

Implementing Simple Drop Down Menu Using Jquery and CSS

Implementing Simple Drop Down Menu Using Jquery and CSS

<p>This post is very basic level Jquery and CSS implementation. I want to explain how to design a simple drop-down menu with CSS, HTML, and Jquery. This system helps you to minimize the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects.&nbsp;</p> <p>&nbsp;</p> <p>HTML Code</p> <p>Simple HTML code</p> <pre class="language-markup"><code>&lt;div class="dropdown"&gt; &lt;a class="account" &gt;My Account&lt;/a&gt; &lt;div class="submenu"&gt; &lt;ul class="root"&gt; &lt;li &gt;&lt;a href="#Dashboard" &gt;Dashboard&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a href="#Profile" &gt;Profile&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a href="#settings"&gt;Settings&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a href="#feedback"&gt;Send Feedback&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> <p>&nbsp;</p> <p>JavaScript</p> <p>Contains javascipt code. $(".account").click(function(){}- account is the class name of the My Account anchor tag. Using $(this).attr('id') calling id value of the anchor tag and based on condition showing .submenu div box and the same time $(this).attr('id', '1') adding id value too.</p> <pre class="language-javascript"><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js "&gt;&lt;/script&gt;; &lt;script type="text/javascript" &gt; $(document).ready(function() { $(".account").click(function() { var X=$(this).attr('id'); if(X==1) { $(".submenu").hide(); $(this).attr('id', '0'); } else { $(".submenu").show(); $(this).attr('id', '1'); } }); //Mouse click on sub menu $(".submenu").mouseup(function() { return false }); //Mouse click on my account link $(".account").mouseup(function() { return false }); //Document Click $(document).mouseup(function() { $(".submenu").hide(); $(".account").attr('id', ''); }); }); &lt;/script&gt;</code></pre> <p>&nbsp;</p> <p>Document click on document $(document).mouseup(function() hiding the .submenu</p> <p>&nbsp;</p> <p>CSS Code</p> <pre class="language-css"><code>.dropdown { color: #555; margin: 3px -22px 0 0; width: 143px; position: relative; height: 17px; text-align:left; } .submenu { background: #fff; position: absolute; top: -12px; left: -20px; z-index: 100; width: 135px; display: none; margin-left: 10px; padding: 40px 0 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } .dropdown li a { color: #555555; display: block; font-family: arial; font-weight: bold; padding: 6px 15px; cursor: pointer; text-decoration:none; } .dropdown li a:hover { background:#155FB0; color: #FFFFFF; text-decoration: none; } a.account { font-size: 11px; line-height: 16px; color: #555; position: absolute; z-index: 110; display: block; padding: 11px 0 0 20px; height: 28px; width: 121px; margin: -11px 0 0 -10px; text-decoration: none; background: url(icons/arrow.png) 116px 17px no-repeat; cursor:pointer; } .root { list-style:none; margin:0px; padding:0px; font-size: 11px; padding: 11px 0 0 0px; border-top:1px solid #dedede; }</code></pre>

read more...