Javascript Simple menu déroulant de la boîte de

Je sais que cette question a été posée plusieurs fois, mais je suis à la recherche d'une approche plus simple. La plupart des questions sont pour un full Javascript menu déroulant, mais je suis juste après une petite boîte. Regardé partout, et cela n'a pas été répondu.

Je suis en train d'apprendre le Javascript à partir d'un texte livre que j'ai acheté, donc je préfère que quelqu'un m'a aidé, ou si vous préférez simplement donner directement les réponses, juste un peu de commentaire serait apprécié donc je sais ce qui se passe. Je préfère utiliser du Javascript au lieu de jQuery depuis que je suis en train d'apprendre à partir d'un Javascript que du texte.

Je suis entrain de créer un mini réseau social sorte de page. Et en haut à droite, j'ai le de personnes nom d'utilisateur, avec une flèche à côté de lui. Je suis en train de faire une zone de liste déroulante, lorsque la flèche est cliqué, et à l'intérieur de cette zone de liste déroulante sera un "Signe" bouton, et le bouton 'Paramètres'. Honnêtement, je n'ai aucune idée de par où commencer car c'est une chose supplémentaire que je cherche.

Pourquoi réinventer la roue quand Bootstrap vous donne une belle et simple menu déroulant. Vous pouvez personnaliser et choisissez ce que vous voulez à partir de fichiers d'amorce de sorte que vous n'avez pas inutile de css et de javascript. (twitter.github.com/bootstrap/components.html#dropdowns)
On dirait que cette question a été posée avant: stackoverflow.com/questions/7362670/...
Comme je l'ai dit, je suis en train d'apprendre le Javascript, j'ai donc besoin de savoir comment faire les choses comme c'est simple, clair Javascript avec pas de bibliothèque.
C'est une question semblable, oui, mais il ne permet pas de répondre directement à la question. Les liens donnés ne sont pas répondre à ma question, et l'exemple de code donné ne fonctionne pas correctement.
pourquoi charger une bibliothèque, avec le soutien de groupes de Bouton Bouton listes déroulantes des onglets de Navigation, de pilules, et les listes de la barre de navigation Étiquettes Badges en-têtes de Page et le héros de l'unité de Vignettes Alertes barres de Progression des Modaux des listes déroulantes des info-bulles Popovers Accordéon Carrousel Typeahead lorsque toutes les OP veut, c'est un display=none/block div à la souris?

OriginalL'auteur Fizzix | 2013-03-06

  1. 7

    Trouver un exemple de code ci-dessous. Nous pouvons faire de nombreuses façons. C'est simple JavaScript pour les débutants.

    <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>
    faire l' > ce lien, vous accèderez à la main, ou bien lui donner un pointeur de pointeur. Aussi tous les CSS pourrait être dans une feuille de style et tous les JS dans la tête, y compris le onclick apprenons Jade de bonne pratique 🙂
    haha, merci pour les conseils 🙂
    Chandrasek - Que le code est parfait et effectue exactement ce dont j'ai besoin 🙂 c'est Très simple et facile à lire. Je vais donner un coup de feu et de commencer à construire. Merci pour votre aide 🙂
    Voici une version plus propre, mais il a besoin de plus de jsfiddle.net/mplungjan/dGRmQ - fermer le menu sur l'évasion ou onclick en dehors du menu et il y a un peu de CSS questions - jade, view-source de jsfiddle.net/mplungjan/dGRmQ/show
    Je viens de handcoded ici, mais comme par mplungjan commentaires il convient de séparer seulement. 🙂

    OriginalL'auteur Vijayakumar Chandrasekaran