Menù orizzontale

**PuntaT** · 14-08-2016, 02:59

Buonasera,

Ho bisogno di qualche consiglio per il menù della mia pagina.
E' un menù orizzontale, ma nell' hover, deve apparire una piccola finestra bianca (basterebbe un rettangolo) da riempire con altri elementi come img e text.
Riuscite a darmi una mano con CSS/CSS3?
Aspetto vostra risposta.

Grazie

**SerenaGrafic@** · 14-08-2016, 11:14

Ciao PuntaT,
utilizzi bootstrap?

http://getbootstrap.com/

Troverai un sacco di menù compreso quello che fa al caso tuo ... sono semplici da integrare con i siti oltretutto. Dacci un'occhiata

Rimango a disposizione, ciao!

**EliBelTI** · 27-08-2016, 17:58

ciao, ho fatto una piccola pagina html come esempio. chiedi senza problemi qualunque cosa. spero di esserti stata utile

codice HTML:

<html>
<head>
   <title>Test menu</title>
   <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
   <style type="text/css">
      ul > li { float:left; list-style-type:none; margin:0 5px; position:relative; }
      .elMenu { background-color:greenyellow; padding:0 5px; cursor:pointer; }
      .elMenu:hover { background-color:yellow; }
      .elSubMenu { width:200px; border:3px solid yellow; position:absolute; padding:10px 5px; }
   </style>
</head>
<body>

<ul>
  <li>
      <span id="m1" class="elMenu">Menu 1</span>
      <div id="d1" class="elSubMenu" hidden>testo menu 1</div>
  </li>
  <li>
      <span id="m2" class="elMenu">Menu 2</span>
      <div id="d2" class="elSubMenu" hidden>testo menu 2</div>
  </li>
</ul>

<script type="text/javascript">
   $(".elMenu").hover(function() {
      var idEl = $(this).attr("id").replace("m", "");
      $("#d" + idEl).show();
   }, function() { $(".elSubMenu").hide(); });
</script>
</body>
</html>

Discussione: Menù orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

Menù orizzontale

Permessi di invio