CODEWITHSUNDEEP
javascripthtmlcsslistdrop-down-menu
MysteryX
MysteryX

Reputation: 105

Disappearing drop down menu

I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.

<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
    function navagate(menu) {
    var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
    if (panel.style.marginTop == maxh){
        panel.style.marginTop = "0px";
        navag.innerHTML = "Close";
    }
    else {
        panel.style.marginTop = maxh;
        navag.innerHTML = "Open";
    }
    }
    window.onload = function(){panel.style.marginTop = "-362px";}
</script>

<body>


<div id = "panel">

<ul>

<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>

</ul>


<div id ="sections_button">

<a onclick = "navigate ('panel')" id = "navag">Open</a>

</div>
</div>
</body>
</body>


</html>


#panel {
    width : 160px;
    height: 130px;
    background-color: gray;
    margin-left: 30px;
    margin-top:20px;


}

#panel li {
    list-style-type: none;
}

Upvotes: 0

Views: 166

Answers (3)

AWolf
AWolf

Reputation: 8980

With jQuery you could do it like the example below.

I think it is now almost like you wanted it. Maybe some styling improvements are required.

With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.

$(function() {
    var $menuButton = $('#openButton');
    var $menu = $('#menu');
    
    var btnToggleAnim = function() { 
        $menuButton.animate({opacity: 'toggle'}, "fast");
    };
    
    var menuToggleAnim = function() { 
        $('#menu').animate({
            height:'toggle', 
            //opacity: 'toggle'
        },  { duration: "slow" });
    };
    
    $('#closeButton,#openButton').on('click', function() {
           menuToggleAnim();
           btnToggleAnim();
    });
});
*, html {
    padding: 0px;
    font-family: sans-serif;
}

a {
    text-decoration:none;
}

#openButton {
    display:block;
    background: gray;
    color: #fff;
    text-decoration: none;
    border: 2px solid lightgray;
    border-radius: 15px;
}

#closeButton{
   display: block;
   background: gray;
   color: #fff;
   text-align: center;
   border: 2px solid lightgray;
   border-bottom-left-radius: 13px;
   border-bottom-right-radius: 13px;
}

#wrapper {
   display: block;
   text-align: center;
}

#menu {
    display: none;
    background: lightgray;
    color: black;
    padding-top: 5px;
    margin: 0px;
    list-style: none;
}

#menu {
    color: #000;
    text-decoration: none;
    border: 2px solid lightgray;
    border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <a href="#" id="openButton">open</a>
    <ul id="menu">
        <li><a href="#1">CIT</a></li>
        <li><a href="#2">Blackboard</a></li>
        <li><a href="#3">Mcomms</a></li>
        <li><a href="#4">Tables</a></li>
        <li><a href="#5">Exams</a></li>
        <li><a href="#" id="closeButton">close</a></li>
    </ul>
</div>

Upvotes: 0

AWolf
AWolf

Reputation: 8980

You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.

At the moment, I don't know how to move the open/close label below the ul list.

*, html {
    padding: 0px;
    font-family: sans-serif;
}

/* Checkbox Hack */
input[type=checkbox] {
   position: absolute;
   display: none;
}
label { 
  display: block;
  cursor: pointer;
  content: "close";
}

/* Default State */
#wrapper {
   display: block;
   background: gray;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ #menu {
   display: block;
   background: lightgray;
   color: black;
   top:0px;
}

.menuToggle ul{
    display: none;
    width: 100%;
}

#menu {
    padding-top: 5px;
    margin: 0px;
    list-style: none;
}
<div id="wrapper">
    <div class="menuToggle">
        <label for="toggle-1">open</label>
        <input type="checkbox" id="toggle-1"/>
        <ul id="menu">
            <li>CIT</li>
            <li>Blackboard</li>
            <li>Mcomms</li>
            <li>Tables</li>
            <li>Exams</li>
        </ul>
    </div>
</div>

Upvotes: 0

holl
holl

Reputation: 308

Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.

A few things I noticed:

You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:

<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>

Second, you have some spelling mistakes: 

<a onclick = "navigate ('panel')" id = "navag">Open</a>

vs

function navagate(menu) {

You can see there that your function would never be called because of it.

Lastly, your 'open' and 'close' a here:

<a onclick = "navigate ('panel')" id = "navag">Open</a>

Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.

Please let me know if you have any other questions, or if I misunderstood.

Upvotes: 2

Related Questions