How to make dropdown menu

Question

I find this dropdown menu on internet.The problem is dropdown is always open and it doesnt work.When i paste all default code from http://codepen.io/Jeplaa/pen/IzAvx it doesn't work.Please can you help me.How i can make when user click button it show dropdown menu and stay until user click on button again.

I include 2 scripts

 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 <script src="assets/js/menu.js"></script>

Also the the code of dropdown menu:

 $( ".cog, .admin-text" ).on( "click", function() { $( ".menu" ).stop().fadeToggle( "fast" ); }); 

 /*MENU CSS------------*/ .top { background-color:#F8F8F8; width:100%; height:60px; -webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); -moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); } .profile_img { max-width: 28px; max-height: 32px; margin-top:5px; } .content { position: relative; top: 5px; width: 250px; margin-left:30px; } .user_text { display:inline-block; margin-left:20px; vertical-align:20%; font-family: "Open Sans", sans-serif; font-size: 15px; } .admin-panel { background: #F8F8F8; width: 240px; height: 40px; color: #888; border: none; border-radius: 3px; padding: 0 0 0 10px; font: bold 13px Helvetica, sans-serif; text-transform: uppercase; line-height: 41px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; margin-bottom: 7px; box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 ); } .down { position: absolute; top: 0; right: 0; padding: 10px 14px 0 0; border: none; color: #888888; font-size: 20px; } .down:hover { color: #555555; } .user_text { cursor: pointer; } .menu a { display: block; background: #F8F8F8; width: 240px; height: 40px; padding: 0 0 0 10px; font: bold 13px Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #000000; color: rgba( 0, 0, 0, 0.4 ); line-height: 40px; box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 ); font-family: "Open Sans", sans-serif; font-size: 13px; } .menu a:nth-child( 2 ) { border-top-left-radius: 3px; border-top-right-radius: 3px; } .menu a:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .menu a:hover { color: #555555; } .menu a:hover > .octicon { color: #555555; } .arrow { width: 0; height: 0; margin-left: 15px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid #F8F8F8; } 

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <div class="top"> <div class="content"> <div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span> <div class="menu"> <div class="arrow"></div> <a href="#">Edit User</a> <a href="#">Worker Statistics</span></a> <a href="#">Settings</span></a> <a href="#">Logout</a> </div> </div> </div> 

Answer 1

Replace this line:

$( ".cog, .admin-text" ).on( "click", function()

With this line:

$( ".admin-panel" ).on( "click", function()

... and it will work.

You can check it on Codepen: http://codepen.io/catalin586/pen/LRbELV

You may also want to add a display none by default to your menu:

.menu {display: none;}

Answer 2

you use in JQ

 $( ".cog, .admin-text" ).on( "click", function()
   {
    $( ".menu" ).stop().fadeToggle( "fast" );
   });

.cog and .admin-text do not exist in your HTML . i guess you want your .menu to appear ( fadeIn ) after you click the .arrow or on the text with class ".user_text"

also you say that the .menu always appears, ofcourse that happens if you don't hide it. in this example i've hidden it by setting {display:none} in CSS

see code below

let me know if this is what you want.

 $(".down,.user_text").click(function(){ $(".menu").fadeToggle( "fast" ); }) 

 .top { background-color:#F8F8F8; width:100%; height:60px; -webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); -moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); } .profile_img { max-width: 28px; max-height: 32px; margin-top:5px; } .content { position: relative; top: 5px; width: 250px; margin-left:30px; } .user_text { display:inline-block; margin-left:20px; vertical-align:20%; font-family: "Open Sans", sans-serif; font-size: 15px; } .admin-panel { background: #F8F8F8; width: 240px; height: 40px; color: #888; border: none; border-radius: 3px; padding: 0 0 0 10px; font: bold 13px Helvetica, sans-serif; text-transform: uppercase; line-height: 41px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; margin-bottom: 7px; box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 ); } .down { position: absolute; top: 0; right: 0; padding: 10px 14px 0 0; border: none; color: #888888; font-size: 20px; } .down:hover { color: #555555; } .user_text { cursor: pointer; } .menu a { display: block; background: #F8F8F8; width: 240px; height: 40px; padding: 0 0 0 10px; font: bold 13px Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #000000; color: rgba( 0, 0, 0, 0.4 ); line-height: 40px; box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 ); font-family: "Open Sans", sans-serif; font-size: 13px; } .menu a:nth-child( 2 ) { border-top-left-radius: 3px; border-top-right-radius: 3px; } .menu a:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .menu a:hover { color: #555555; } .menu a:hover > .octicon { color: #555555; } .arrow { width: 0; height: 0; margin-left: 15px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid #F8F8F8; } .menu { display:none} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="top"> <div class="content"> <div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span> <div class="menu"> <div class="arrow"></div> <a href="#">Edit User</a> <a href="#">Worker Statistics</a> <a href="#">Settings</a> <a href="#">Logout</a> </div> </div> </div> 

Answer 3

.down & .user_text

Try it:

 $( ".down, .user_text" ).on( "click", function() { $( ".menu" ).stop().fadeToggle( "fast" ); }); 

 /*MENU CSS------------*/ .top { background-color:#F8F8F8; width:100%; height:60px; -webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); -moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); } .profile_img { max-width: 28px; max-height: 32px; margin-top:5px; } .content { position: relative; top: 5px; width: 250px; margin-left:30px; } .user_text { display:inline-block; margin-left:20px; vertical-align:20%; font-family: "Open Sans", sans-serif; font-size: 15px; } .admin-panel { background: #F8F8F8; width: 240px; height: 40px; color: #888; border: none; border-radius: 3px; padding: 0 0 0 10px; font: bold 13px Helvetica, sans-serif; text-transform: uppercase; line-height: 41px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; margin-bottom: 7px; box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 ); } .down { position: absolute; top: 0; right: 0; padding: 10px 14px 0 0; border: none; color: #888888; font-size: 20px; } .down:hover { color: #555555; } .user_text { cursor: pointer; } .menu a { display: block; background: #F8F8F8; width: 240px; height: 40px; padding: 0 0 0 10px; font: bold 13px Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #000000; color: rgba( 0, 0, 0, 0.4 ); line-height: 40px; box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 ); font-family: "Open Sans", sans-serif; font-size: 13px; } .menu a:nth-child( 2 ) { border-top-left-radius: 3px; border-top-right-radius: 3px; } .menu a:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .menu a:hover { color: #555555; } .menu a:hover > .octicon { color: #555555; } .arrow { width: 0; height: 0; margin-left: 15px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid #F8F8F8; } 

 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <div class="top"> <div class="content"> <div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"> <b class="user_text">Curtis Jackson</b> </div> <span class="down"> <img src="http://i.imgur.com/bLXw2RL.png"> </span> <div class="menu"> <div class="arrow"></div> <a href="#">Edit User</a> <a href="#">Worker Statistics</span></a> <a href="#">Settings</span></a> <a href="#">Logout</a> </div> </div> </div> 

Answer 4

Remove the .cog and change .admin-text to .admin-panel

$( ".cog, .admin-text" ).on( "click", function()

to

$( ".admin-panel" ).on( "click", function()

Hope it helps!

 $( ".admin-panel" ).on( "click", function() { $( ".menu" ).stop().fadeToggle( "fast" ); }); 

 /*MENU CSS------------*/ .top { background-color:#F8F8F8; width:100%; height:60px; -webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); -moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1); } .profile_img { max-width: 28px; max-height: 32px; margin-top:5px; } .content { position: relative; top: 5px; width: 250px; margin-left:30px; } .user_text { display:inline-block; margin-left:20px; vertical-align:20%; font-family: "Open Sans", sans-serif; font-size: 15px; } .admin-panel { background: #F8F8F8; width: 240px; height: 40px; color: #888; border: none; border-radius: 3px; padding: 0 0 0 10px; font: bold 13px Helvetica, sans-serif; text-transform: uppercase; line-height: 41px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; margin-bottom: 7px; box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 ); } .down { position: absolute; top: 0; right: 0; padding: 10px 14px 0 0; border: none; color: #888888; font-size: 20px; } .down:hover { color: #555555; } .user_text { cursor: pointer; } .menu a { display: block; background: #F8F8F8; width: 240px; height: 40px; padding: 0 0 0 10px; font: bold 13px Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #000000; color: rgba( 0, 0, 0, 0.4 ); line-height: 40px; box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 ); font-family: "Open Sans", sans-serif; font-size: 13px; } .menu a:nth-child( 2 ) { border-top-left-radius: 3px; border-top-right-radius: 3px; } .menu a:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .menu a:hover { color: #555555; } .menu a:hover > .octicon { color: #555555; } .arrow { width: 0; height: 0; margin-left: 15px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid #F8F8F8; } 

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <div class="top"> <div class="content"> <div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span> <div class="menu"> <div class="arrow"></div> <a href="#">Edit User</a> <a href="#">Worker Statistics</span></a> <a href="#">Settings</span></a> <a href="#">Logout</a> </div> </div> </div> 

Answer 5

You are not having any elements with classes either cog or admin-text. You are using onclick on these. The codePen example which you have provided contains an element with admin-text class

Answer 6

您可以在jquery中使用fadeIn和fadeOut参见jquery中的文档