web-dev-qa-db-fra.com

Créer un menu déroulant sur clic CSS

Je suis obligé de construire un menu avec 5 options, après avoir cliqué sur celui-ci, un nouveau sous-menu doit apparaître. Je ne sais absolument pas comment faire cela.

/**Navigation */

nav {
  border: 1px solid red;
  float: left;
  margin-right: 35px;
  min-height: 280px;
}

nav li {
  text-decoration: none;
  font-weight: normal;
  color: red;
  list-style: none;
}


/**Content */

#section {
  background-color: ;
  border: 1px solid;
  font: normal 12px Helvetica, Arial, sans-serif;
  margin-left: 180px;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
<div class="clearfix"></div>
<nav>
  <ul>
    <li><a href="index.html" accesskey="1"> Home </a> </li>
    <li><a href="Portfolio.html" accesskey="2"> Portfolio </a> </li>

    <ul>
      <li><a href="Commercial.html">Commercial</a> </li>
      <li><a href="Residential.html">Residential</a> </li>
      <li><a href="heritage.html">Heritage</a> </li>
      <li><a href="Rennovations.html">Rennovations</a> </li>
    </ul>

    <li><a href="services.html" accesskey="3"> Services </a> </li>
    <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
    <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
  </ul>
</nav>

javascripthtmlcsshtml5css3
13
Brendan

CSS n'a pas de gestionnaire de clic. Pour cette raison, il est impossible de faire avec CSS standard. Vous pouvez utiliser quelque chose appelé la case à cocher bidouille, mais à mon humble avis, c'est un peu maladroit et il serait difficile de travailler avec un menu de navigation tel que requis par votre cas d'utilisation. Pour cette raison, je suggérerais jQuery ou Javascript ... Voici une solution assez simple utilisant jQuery.

Fondamentalement, nous cachons la sous-navigation depuis le début en utilisant display: none;. Ensuite, en utilisant jQuery, lorsque ".parent" est cliqué, nous basculons une classe ".visible" sur l'élément de sous-navigation (la UL imbriquée) avec display: block; qui la fait apparaître . Lorsque vous cliquez à nouveau, il disparaît au fur et à mesure que la classe est supprimée.

Notez que pour que cela fonctionne, chaque <UL> imbriqué qui est un "sous-navigateur" DOIT avoir la classe .sub-nav et son élément parent (le <LI>) DOIT avoir la classe .parent. De plus, comme cela utilise jQuery, vous devrez connecter une bibliothèque jQuery à votre site. Vous pouvez le faire en l'hébergeant vous-même et en le reliant comme vous le feriez normalement, ou vous pouvez le relier à partir de service de bibliothèque de Google (recommandé). 

JSFiddle Demo

$(document).ready(function() {
  $('.parent').click(function() {
    $('.sub-nav').toggleClass('visible');
  });
});
#nav ul.sub-nav {
  display: none;
}

#nav ul.visible {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li>Home</li>
  <li class="parent">About
    <ul class="sub-nav">
      <li>Johnny</li>
      <li>Julie</li>
      <li>Jamie</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

10
Michael

En plus du hack checkbox déjà mentionné, vous pouvez également utiliser un bouton comme éléments de menu et utiliser l'état :focus pour afficher le menu déroulant. Un avantage par rapport à cela est que le menu se fermera si vous cliquez en dehors de celui-ci. Certains éléments HTML ne sont pas naturellement ciblés sur les clics; pour ceux-ci, vous pouvez ajouter l'attribut "tabindex" pour leur permettre de se concentrer. 

ul {
    list-style: none;
}

.menu > li {
    float: left;
}
.menu button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.menu button:hover,
.menu button:focus {
    outline: 0;
    text-decoration: underline;
}

.submenu {
    display: none;
    position: absolute;
    padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
    display: block;
}
<ul class="menu">
    <li>
        <button>Home</button>
        <ul class="submenu">
            <li><a href="http://www.barbie.com">Link</a></li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </li>
    <li><button>More</button></li>
    <li><button>Info</button></li>
</ul>

11
Stephan Muller

Bien sûr je suis en retard mais:

Vous pouvez déclencher un clic CSS en utilisant un hack!

Travailler avec une case à cocher !!

Échantillon:

      ul{
            display: none;
        }
        #checkbox{
            opacity: 0;
        }
        #checkbox:checked + ul {
            
            display: block;
        }
    <div class="container">
        <label for="checkbox">Dropdown menu</label>
        <input id="checkbox" type="checkbox" />        
        <ul>
            <li><a href="#">Dropdown link 1</a></li>
            <li><a href="#">Dropdown link 2</a></li>
        </ul>
    </div>

Vous pouvez utiliser des transitions pour animer l'émission avec un effet de masquage:) Ceci est juste un exemple très simple !!

Mention: c’est un hack CSS3 si vous avez besoin du support de borwser pour les anciens navigateurs cela ne fonctionne pas 

3
Steven Web

En fait, il est possible que cela fonctionne avec le comportement pur des éléments CSS et des éléments de navigateur, en utilisant la case à cocher bidouille, mais au moment de la rédaction de cet article, il préconise ce qui DEVRAIT être fait avec CSS par rapport à CE QUI pourrait être fait avec CSS. Cela peut aussi causer un code sémantique assez terrible (après tout, il y a une raison pour laquelle il est généralement indiqué par la case à cocher HACK). 

Cela dit, vous pouvez l'utiliser si vous n'avez que des exigences pour les navigateurs modernes, en donnant des fonctionnalités limitées aux autres. Je l'ai moi-même utilisé dans le code de production, sur un projet isolé chromé et il est très amusant de jouer avec.

Voici un lien pour en savoir plus:

http://css-tricks.com/the-checkbox-hack/

Mais soulignons encore, comme d’autres l’ont déjà fait ici, que le comportement fonctionnel doit vraiment se faire via JavaScript. À moins que vous ne souhaitiez réellement une solution de menu en survol, la question est différente!

1
lee_gladding

 $('#open').on('click', function(e) {
   simple_showpopup("popup", e);
 });

 function simple_showpopup(id, evt) {
   var _pnl = $("#" + id);
   _pnl.show();
   _pnl.css({
     "left": evt.pageX - ($("#" + id).width() / 2),
     "top": (evt.pageY + 10)
   });

   $(document).on("mouseup", function(e) {
     var popup = $("#" + id);
     if (!popup.is(e.target) && popup.has(e.target).length == 0) {
       popup.hide();
       $(this).off(e);
     }
   });
 }

 $("#popup").hide();
.defa-context-panel {
  border: 1px solid black;
  position: absolute;
  min-width: 200px;
  min-height: 150px;
  background-color: #f8f8f8;
  border: solid 1px #f2f2f2;
  border-radius: 10px;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>Open&nbsp;&nbsp;&nbsp;&nbsp;<span id="open" style="text-decoration:underline;color:blue;cursor:pointer">Click here</span>

<div id="popup" class="defa-context-panel">Content
  <div>DIV inside</div>
</div>

0
Godly Mathew

une solution purement css à votre problème ressemble à ceci

Démo: http://jsfiddle.net/HyGZf/1/

vous avez besoin de input et label et vous devez supprimer le href du portefeuille si vous souhaitez uniquement utiliser css

vous pouvez ajouter transition: tous les 1s easy-in-out; au sous-menu si vous souhaitez l'animer

/**Navigation */
nav{
    border: 1px solid red ;
    float: left;
    margin-right:35px;
    min-height:280px;
    }


nav li{
text-decoration:none;
font-weight:normal;
color:red;
list-style:none;
display:block;
width:100%;
}   
/**Content */
#section{
    background-color: ;
    border: 1px solid;
    font: normal 12px Helvetica, Arial, sans-serif; 
    margin-left:180px;
 }



 .clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;

}
#Portfolio:checked +ul ul#submenu{
 height:80px;   
}
#submenu{
    overflow:hidden;
    height:0px;
    margin:0;
}
a[accesskey="2"]{
    color:blue;
    cursor:pointer;
    text-decoration:underline;
}

le balisage

    <div class="clearfix"></div>
<nav>
    <input id="Portfolio" type="checkbox" name="menu" hidden>
    <ul>
        <li><a href="index.html" accesskey="1"> Home </a> </li>
        <li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>

        <ul id=submenu type="list">
              <li><a href="Commercial.html">Commercial</a> </li>
              <li><a href="Residential.html">Residential</a> </li>
              <li><a href="heritage.html">Heritage</a> </li>
              <li><a href="Rennovations.html">Rennovations</a> </li>
        </ul>

        <li><a href="services.html" accesskey="3"> Services </a> </li>
        <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
        <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
     </ul>
</nav>
0
Gildas.Tambo

Pour ce faire, vous devez utiliser javascript et enregistrer un gestionnaire d’événements click.

Si vous êtes novice dans tous les domaines, recherchez des didacticiels javascript (n'utilisez pas W3Schools, cherchez ailleurs), puis jetez un œil à certains didacticiels jQuery car jQuery simplifie les tâches de ce type.

0
BenM

Il existe de nombreux cadres que vous pouvez utiliser avec de beaux menus pour vos besoins, sans oublier qu'ils prennent en charge tous les appareils (tablettes, téléphones et ordinateurs).

Par exemple, dans le cadre du bootstrap de Twitter, il y a exactement ce dont vous avez besoin, consultez ce tutoriel: Twitter bootstrap - Navs

Lisez toute la section Nav, à la fin, ils parleront de Nav avec liste déroulante pour plus d’options . Le menu du tutoriel lui-même est construit avec le framework de démarrage Twitter.

0
Eran H.