Simple Javascript drop down menu box

javascript html css drop-down-menu menu

14,930

Find the sample code below. We can do it many ways. This is simple one for JavaScript beginners.

<html>
<head>
<script language="JavaScript" type="text/javascript">
function showDiv(){
    if(document.getElementById('showDiv').style.display == 'none'){
        document.getElementById('showDiv').style.display = 'block';
    }else{
        document.getElementById('showDiv').style.display = 'none';
    }
}
</script>
</head>
<body>
<div style="width:auto;; margin:0 auto;">
    <div style="position:relative; width:130px; padding:10px; float:left; border:1px solid blue;">
        <div style="float:left;">Welcome Friend!</div>
        <div style="float:left; margin-left:15px;" onclick="showDiv();">></div>  

    </div>
    <div id="showDiv" style="display:none; float:right; width:150px; height:50px; position:absolute; margin-top:40px; border:1px solid red;">
        <div style="float:right;"><input type="submit" value="Settings" /></div>
        <div style="clear:both;"></div>
        <div style="float:right;"><input type="submit" value="Sign Out" /></div>
    </div>
</div>
</body>
</html>

14,930

Fizzix

Full-stack Javascript developer. I specialize in Angular and NodeJS.

Updated on September 15, 2022

Comments

Fizzix almost 2 years

I know this question has been asked a few times, but I'm searching for a more simple approach. Most of the questions are for a full Javascript drop down menu, but I'm just after one small box. Looked everywhere, and this has not been answered.

I am learning Javascript from a text book I purchased, so I'd prefer it if someone helped me, or if you prefer to just give straight up answers, just a bit of commenting would be appreciated so I know whats going on. I'd prefer to use plain Javascript instead of jQuery since I am learning from a Javascript only text book.

I am creating a mini social network kind of page. And at the top right, I have the persons username, with an arrow next to it. I am trying to make a dropdown box, when that arrow is clicked, and inside that dropdown box will be a 'Sign Out' button, and 'Settings' button. I honestly have no idea where to start since this is something extra I am attempting.
mplungjan over 11 years

make the > a link, then you get the hand for free, or give it a pointer cursor. Also all CSS could be in a stylesheet and all JS in the head, including the onclick - let's teach Jade good practises :)
Fizzix over 11 years

@mplungjan - haha, thanks for the pointers :)
Fizzix over 11 years

@Vijayakumar Chandrasek - That code is perfect and performs exactly what I need :) Very simple and easy to read. I'll give it a shot and start building off it. Thanks for your help :)
mplungjan over 11 years

Here is a cleaner version, but it needs more jsfiddle.net/mplungjan/dGRmQ - close menu on escape or onclick outside the menu and there are some CSS issues - jade, view-source of jsfiddle.net/mplungjan/dGRmQ/show
Vijayakumar Chandrasekaran over 11 years

@JadeMulholland: I just handcoded here but as per mplungjan comments it should be separate only. :)