Creating an onclick event for a button with a dropdown menu

Question

I've been learning HTML and CSS for some weeks now and I start feeling comfortable with those. However I'm trying to learn JavaScript too.

I've been working on a button in HTML and CSS, you can view the demo of the button here.

I want to make the dropdown menu visible when you click the button and also if you click the button again the dropdown menu disappears.

Is there any simple or understandable way for creating a function which does this in JavaScript?

Here is the code I have:

HTML:

    <div id="language-wrapper">
      <a class="language-icon fr" href="#" alt="choose-your-language">Language</a>
      <div id="language-dropdown">
        <h3>Choose your language</h3>
        <a class="language-links" href="#">Chinese</a>
        <a class="language-links" href="#">Danish</a>
        <a class="language-links" href="#">Deutsch</a>
        <a class="language-links" href="#">English</a>
        <a class="language-links" href="#">Espanol</a>
        <a class="language-links" href="#">Filipino</a>
        <a class="language-links" href="#">Hindu</a>
        <a class="language-links" href="#">Italiano</a>
        <a class="language-links" href="#">Norsk</a>
        <a class="language-links" href="#">Nederlands</a>
        <a class="language-links" href="#">Polski</a>
        <a class="language-links" href="#">Portugues</a>
        <a class="language-links" href="#">Svenska</a>
        <a class="language-links" href="#">Suomi</a>
        <a class="language-links" href="#">Turkce</a>
        <a class="language-links" href="#">Urdu</a>
        <p>Do you speak multiple languages or can't find your language? <font color="#d13030">Help us translate!</font><p>

      </div> <!-- end of language-dropdown class -->
    </div> <!-- end of language-wrapper -->

CSS:

    #language-wrapper { display: inline-block; }

    #language-wrapper:hover #language-dropdown { opacity: 1; display: block; }

    .language-icon {
      color: #fff;
      font-weight:700;
      padding-right:20px;
      padding-left:30px;
      display:inline-block;
      font-size:11px;
      text-align:right;
      text-decoration:none;
      position:relative;
      left: 0; top: 0;
    }

    .fr { background: url("images/language-sprite.png") no-repeat 0 0; }
    .fr:hover { background: url("images/language-sprite.png") no-repeat 0 -20px; color: #d13030; }

     .language-icon:before {
      content:'\25BE';
      width:0px;
      height:0;
      position:absolute;
      right:16px;
      top: 0;
    }

    .language-icon:hover:before { 
      color: #d13030;
      content: '\25B4';
      top: -1px;
    }

    /* ------------------ LANGUAGE DROPDOWN ------------------ */

     #language-dropdown {
      opacity: 0;
      width: 1023px;
      display: none;
      margin-top: 3px;
      left: 0;
      position: absolute;
      border: 1px solid #ddd;
      background: #fff;
      box-shadow: 0px 3px 3px #b3b3b3;

     }

     #language-dropdown h3 {
      color: #d13030;
      font-size: 14px;
      font-weight: normal;
      padding: 5px 15px 0px 15px;
     }
    #language-dropdown p {

      font-size: 12px;
      padding: 0px 0px 10px 15px;
    }

    #language-dropdown a {
      padding: 0px 0px 0px 15px;
    }


     .language-links {
      font-size: 12px;
      text-decoration: none;
      color: #2793e6;
     }

     .language-links:hover {
      text-decoration: underline;

     }

vanilla javascript or jquery?

Jorge Y. C. Rodriguez
– Jorge Y. C. Rodriguez

2014-03-22 21:16:41 +00:00
Commented Mar 22, 2014 at 21:16 — Jorge Y. C. Rodriguez
– Jorge Y. C. Rodriguez, Commented Mar 22, 2014 at 21:16
vanilla javascript i would say.

Nohman
– Nohman

2014-03-22 21:18:55 +00:00
Commented Mar 22, 2014 at 21:18 — Nohman
– Nohman, Commented Mar 22, 2014 at 21:18

G-Cyrillus · Accepted Answer · 2014-03-22 21:47:17Z

2

it can be a basic toggle display function on onclik event:

    function toggle(el) {
    var tag=document.getElementById(el);
      tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document 
// here defaut is set to block cause it is none in CSS
    }

 <a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');">Language</a>

test here : http://codepen.io/anon/pen/cHIrd/

note:

opacity:0; removed from your initial CSS

Better practice is to toggle class not style values :)

and maybe to set onclick event via javScript.

return false can be added to avoid link to href .

 <a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');return false;">Language</a>

edited Mar 22, 2014 at 21:47

answered Mar 22, 2014 at 21:40

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jorge Y. C. Rodriguez · Accepted Answer · 2014-03-22 21:34:03Z

0

The Html

<button id="clickme">Clickme</button>
<h1 id="Another">Menu</h1>

The JavaScript:

    document.getElementById("clickme").onclick=function(){

        var el = document.getElementById('Another');
        if (el.style.display == '') {
          el.style.display = 'none';
              alert("hide");
        }else{
          el.style.display = '';
              alert("show");
        }

    };

Here is a sample

answered Mar 22, 2014 at 21:34

Jorge Y. C. Rodriguez

3,4625 gold badges42 silver badges64 bronze badges

Collectives™ on Stack Overflow

Creating an onclick event for a button with a dropdown menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related