Amar A. Amar A. - 2 months ago 4
Javascript Question

How to make dropdown menu

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

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>

Comments