Comment faire un menu déroulant basé sur CSS pur?

Question

Comment faire un menu déroulant basé sur CSS pur?

Je regarde le menu déroulant horizontal basé sur CSS pur et compatible avec le navigateur....

Je ressemble à l'exemple mentionné ci-dessous

entrez la description de l'image ici

24

css drop-down-menu html

demandé sur Benjamin 2012-03-31 10:10:43

6 réponses

score 67 · Answer 1

Voir ceci est le menu déroulant des bases CSS pures: -

HTML

<ul id="menu">
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a>
        <ul>
        <li><a href="">The Team</a></li>
        <li><a href="">History</a></li>
        <li><a href="">Vision</a></li>
        </ul>
      </li>
      <li><a href="">Products</a>
        <ul>
        <li><a href="">Cozy Couch</a></li>
        <li><a href="">Great Table</a></li>
        <li><a href="">Small Chair</a></li>
        <li><a href="">Shiny Shelf</a></li>
        <li><a href="">Invisible Nothing</a></li>
        </ul>
      </li>
      <li><a href="">Contact</a>
        <ul>
        <li><a href="">Online</a></li>
        <li><a href="">Right Here</a></li>
        <li><a href="">Somewhere Else</a></li>
        </ul>
      </li>
    </ul>

CSS

ul
{
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li
{
    display: block;
    position: relative;
    float: left;
}

li ul
{
    display: none;
}

ul li a 
{
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
}

ul li a:hover 
{
    background: #617F8A;
}
li:hover ul 
{
    display: block;
    position: absolute;
}

li:hover li
{
    float: none;
    font-size: 11px;
}

li:hover a 
{
    background: #617F8A;
}

li:hover li a:hover 
{
    background: #95A9B1;
}

Voir la démo:- http://jsfiddle.net/XPE3w/7/

score 2 · Answer 2

Testé dans IE7-9 et Firefox: http://jsfiddle.net/WCaKg / . balisage:

<ul>
    <li>&lt;li&gt;</li>

    <li>&lt;li&gt;</li>

    <li>&lt;li&gt;

        <ul>
            <li>&lt;li&gt;</li>

            <li>&lt;li&gt;</li>

            <li>&lt;li&gt;</li>

            <li>&lt;li&gt;</li>
        </ul>
    </li>

    <li>&lt;li&gt;</li>

    <li>&lt;li&gt;</li>

    <li>&lt;li&gt;</li>
</ul>

CSS:

* {
  margin: 0;
  padding: 0;
}

body {
  font: 200%/1.5 Optima, 'Lucida Grande', Lucida, 'Lucida Sans Unicode', sans-serif;
}

ul {
  width: 9em;
  list-style-type: none;
  font-size: 0.75em;
}

li {
  float: left;
  margin: 0 4px 4px 0;
  background: #60c;
  background: rgba(102, 0, 204, 0.66);
  border: 4px solid #60c;
  color: #fff;
}
li:hover {
  position: relative;
}

ul ul {
  z-index: 1;
  position: absolute;
  left: -999em;
  width: auto;
  background: #ccc;
  background: rgba(204, 204, 204, 0.33);
}

li:hover ul {
  top: 2em;
  left: 3px;
}

li li {
  margin: 0 0 3px 0;
  background: #909;
  background: rgba(153, 0, 153, 0.66);
  border: 3px solid #909;
}

score 2 · Answer 3

html, body {
    font-family: Arial, Helvetica, sans-serif;
}

/* define a fixed width for the entire menu */
.navigation {
  width: 150px;
}

/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
  display: block;
  background-color: #CCC;
  text-decoration: none;
  padding: 10px;
  color: #000;
}

/* add hover behaviour */
.mainmenu a:hover {
    background-color: #C5C5C5;
}


/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
  background-color: #999;
}

/* hover behaviour for links inside .submenu */
.submenu a:hover {
  background-color: #666;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

<html>
<body>
<head>
<link rel="stylesheet" type="css/text" href="nav.css">
</head>
</body>
<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Products</a>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a></li>
      </ul>
    </li>
    <li><a href="">Contact us</a></li>
  </ul>
</nav>

score 1 · Answer 4

Voir le code en ligne sur: WebCrafts.org

Code HTML:

<body id="body">
<div id="navigation">
    <h2>
        Pure CSS Drop-down Menu
    </h2>
  <div id="nav" class="nav">
    <ul>
        <li><a href="#">Menu1</a></li>
        <li>
            <a href="#">Menu2</a>
          <ul>
                <li><a href="#">Sub-Menu1</a></li>
                <li>
                    <a href="#">Sub-Menu2</a>
                  <ul>
                        <li><a href="#">Demo1</a></li>
                      <li><a href="#">Demo2</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub-Menu3</a></li>
                <li><a href="#">Sub-Menu4</a></li>
            </ul>
        </li>
        <li><a href="#">Menu3</a></li>
        <li><a href="#">Menu4</a></li>
    </ul>
  </div>
</div>
</body>

Code Css:

body{
    background-color:#111;
}

#navigation{
    text-align:center;
}
#navigation h2{
    color:#DDD;
}

.nav{
    display:inline-block;
    z-index:5;
    font-weight:bold;
}
.nav ul{
    width:auto;
    list-style:none;
}

.nav ul li{
    display:inline-block;
}

.nav ul li a{
    text-decoration:none;
    text-align:center;
    color:#222;
    display:block;
    width:120px;
    line-height:30px;
    background-color:gray;
}

.nav ul li a:hover{
    background-color:#EEC;   
}
.nav ul li ul{
    margin-top:0px;
    padding-left:0px;
    position:absolute;
    display:none;
}

.nav ul li:hover ul{
    display:block;
}

.nav ul li ul li{
    display:block;
}

.nav ul li ul li ul{
    margin-left:100%;
    margin-top:-30px;
    visibility:hidden;
}

.nav ul li ul li:hover ul{
    margin-left:100%;
    visibility:visible;
}

score 0 · Answer 5

Vous n'avez pas à toujours utiliser ul éléments pour y parvenir, vous pouvez utiliser d'autres éléments comme on le voit ci-dessous. Ici, il y a 2 Exemples, l'un utilisant div et l'autre utilisant select.

Cet exemple démontre la fonctionnalité de base, mais peut être étendu / enrichi plus. Il est testé sous linux uniquement (iceweasel et chrome).

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
.drop_container
{
  position:relative;
  float:left;
}
.always_visible
{
  background-color:#FAFAFA;
  color:#333333;
  font-weight:bold;
  cursor:pointer;
  border:2px silver solid;
  margin:0px;
  margin-right:5px;
  font-size:14px;
  font-family:"Times New Roman", Times, serif;
}
.always_visible:hover + .hidden_container
{
  display:block;
  position:absolute;
  color:green;
}
.hidden_container
{
  display:none;
  border:1px gray solid;
  left:0px;
  background-color:#FAFAFA;
  padding:5px;
  z-index:1;
}
.hidden_container:hover
{
  display:block;
  position:absolute;
}
.link
{
  color:blue;
  white-space:nowrap;
  margin:3px;
  display:block;
}
.link:hover
{
  color:white;
  background-color:blue;
}
.line_1
{
  width:800px;
  border:1px tomato solid;
  padding:5px;
}
</style>      
</head>

<body>

<div class="line_1">
<div class="drop_container">
  <select class="always_visible" disabled><option>Select</option></select>
  <div class="hidden_container">
  <a href="http://www.google.gr" class="link">Option_ 1</a>
  <a href="http://www.google.gr" class="link">Option__ 2</a>
  <a href="http://www.google.gr" class="link">Option___ 3</a>
  <a href="http://www.google.gr" class="link">Option____ 4</a>
  </div>
</div>
<div class="drop_container">
  <select class="always_visible" disabled><option>Select</option></select>
  <div class="hidden_container">
  <a href="http://www.google.gr" class="link">____1</a>
  <a href="http://www.google.gr" class="link">___2</a>
  <a href="http://www.google.gr" class="link">__3</a>
  <a href="http://www.google.gr" class="link">_4</a>
  </div>
</div>
<div style="clear:both;"></div>
</div>

<br>

<div class="line_1">
 <div class="drop_container">
  <div class="always_visible">Select___</div>
  <div class="hidden_container">
  <a href="http://www.google.gr" class="link">Option_ 1</a>
  <a href="http://www.google.gr" class="link">Option__ 2</a>
  <a href="http://www.google.gr" class="link">Option___ 3</a>
  <a href="http://www.google.gr" class="link">Option____ 4</a>
  </div>
</div>
 <div class="drop_container">
  <div class="always_visible">Select___</div>
  <div class="hidden_container">
  <a href="http://www.google.gr" class="link">Option_ 1</a>
  <a href="http://www.google.gr" class="link">Option__ 2</a>
  <a href="http://www.google.gr" class="link">Option___ 3</a>
  <a href="http://www.google.gr" class="link">Option____ 4</a>
  </div>
</div>
<div style="clear:both;"></div>
</div>

</body>
</html>

score 0 · Answer 6

Créer un menu déroulant simple en utilisant HTML et CSS

CSS:

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

Et HTML:

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Voir la démo en ligne

Las etiquetas más populares

Comment faire un menu déroulant basé sur CSS pur?

6 réponses