Geek asks and answers

Simple Javascript Dropdown Menu

I know this question has been asked several times, but I'm looking for a simpler approach. Most questions relate to the full Javascript drop-down menu, but right after one small box. He looked everywhere, and they did not answer.

I am learning Javascript from a tutorial that I bought, so I would prefer someone to help me, or if you would rather just give answers to the questions, only a few comments would be appreciated, so I know what happens, I would rather use a simple Javascript instead of jQuery since I only study the Javascript tutorial.

I am creating a mini social network. And at the top right, I have a username, with an arrow next to it. I am trying to create a drop-down list when this arrow is clicked, and the "Exit" button and the "Settings" button will appear inside this drop-down box. I honestly have no idea where to start, since this is something superfluous, I'm trying.

+5
source share
1 answer

Find the sample code below. We can do this in many ways. It is easy 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>
+7
source

More articles:


All Articles