menu a tendina, chi mi puo aiutare?

**angelo85ct** · 13-12-2008, 18:25

salve ragazzi, ho il seguente munu:

Perfavore

Codice PHP:


 <div id="container-navigation">  

     <ul id="navigation"> [*][url="#"]home[/url]   [*][url="#"]products[/url]   [*][url="#"]services[/url]   [/list]</div>

E questo è il relativo css:

Codice PHP:


#container-navigation {

     width: 670px;     

background-color: #45AAFF; 

    height: 22px;     

border-bottom: 1px solid #ffffff; 

}

solo che sulla voce products dovrei fare un menu a tendina contenente altre tre voci, ma non so come fare, chi mi pup aiutare?

**artorius** · 13-12-2008, 21:31

puoi mettere un altro ul all'interno dell'li di product in questo modo:

codice:

[*]products
   <ul>[*]Subproduct 1      [*]Subproduct 2[*]Subproduct 3[/list]

Poi stilarlo in modo che gli[*] abbiano altezza fissa ed overflow: hidden;

Infine, aggiungi un effetto al passaggio del mouse sul[*] di product che aumenti l'altezza dello stesso.
Per farlo usa una libreria JS tipo Mootools

Devi solo aggiungere la libreria alla pagina e mettere lo script:

Io farei anche una modifica al codice HTML:

codice:

<div id="container-navigation">  
   <ul id="navigation">
      <li class="Toogler">home   
      <li class="Toogler">
         products
         <ul>[*]Subproduct 1      [*]Subproduct 2[*]Subproduct 3[/list]
         
      <li class="Toogler">services   [/list]
</div>

il CSS provalo così:

codice:

li.Toogler{
   height: 20px;
   overflow: hidden;
}

Poi come JS:

codice:

<script type="text/javascript">
   window.addEvent('domready', function(){
      $$('#navigation li.Toogler').each(function(li){
         li.set('oldheight', this.getStyle('height').toInt());
         li.addEvents({
            'mouseenter' : function(){
               var height = this.getElement('ul').getSize().y+this.getStyle('height').toInt();
               this.tween("height", height);
            },
            'mouseleave' : function(){
               this.tween('height', this.get('oldheight').toInt());
            }
         });
      });
   });
</script>

Questa è un'idea, ovviamente si possono fare anche altre cose.

**angelo85ct** · 13-12-2008, 22:54

ciao, ti ringrazio della risposta, ma non ho capito come dovrei usare la libreria, mi puoi spiegare quale devo prendere e come usarla?
Perfavore

**angelo85ct** · 13-12-2008, 22:59

ho provato a usare il codice che mi hai postato tu, ma con mozilla, la voce del menu dopo prodcts non si vede e nemmeno il menu a tendina, e con ie si vede il sotto menu come se fosse un altro menu sotto a quello primario(due righe di menu)

**artorius** · 14-12-2008, 13:55

hai ragione ho notato che c'erano un paio di errori nel codice:

codice:

window.addEvent('domready', function(){
  $$('#navigation li.Toogler').each(function(li){
     li.set('oldheight', li.getStyle('height').toInt());
     li.addEvents({
        'mouseenter' : function(){
		   var ul = this.getElement('ul');
		   if(ul){
               var height = this.getElement('ul').getSize().y + this.getStyle('height').toInt();
               this.tween("height", height);					   	
		   }
        },
        'mouseleave' : function(){
           this.tween('height', this.get('oldheight').toInt());
        }
     });
  });
});

Per il resto la libreria Mootools la scarichi qui

http://mootools.net/download

Poi la devi importare come uno script :

<script src="mootools.js" type="text/javascript"></script>

Poi, hai aggiunto al CSS le due righe che ti ho postato ed hai aggiunto le Classi agli Li del menu principale?

**angelo85ct** · 14-12-2008, 15:51

ciao, ho fatto come hai detto, ma non va completamente, puoi vedere come viene qui: esempio
con mozilla si vede in un modo e con ie in un altro

ecco il codice della pagina index:

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<link href="bluebusiness.css" rel="stylesheet" type="text/css" />

<script src="mootools.js" type="text/javascript"></script>

<script type="text/javascript">



   window.addEvent('domready', function(){

  $$('#navigation li.Toogler').each(function(li){

     li.set('oldheight', li.getStyle('height').toInt());

     li.addEvents({

        'mouseenter' : function(){

           var ul = this.getElement('ul');

           if(ul){

               var height = this.getElement('ul').getSize().y + this.getStyle('height').toInt();

               this.tween("height", height);                           

           }

        },

        'mouseleave' : function(){

           this.tween('height', this.get('oldheight').toInt());

        }

     });

  });

});



</script>









</head>

<body>

<div id="container">

  <div id="container-header">

    <div id="container-name"><span>Blue</span>Business</div>

    <div id="container-slogan"><span>&quot;</span>your slogan goes here<span>&quot;</span></div>

  </div>

  <div id="container-eyecatcher">

    <div id="container-navigation">  

   <ul id="navigation">

      <li class="Toogler">[url="#"]home[/url]   

      <li class="Toogler">

         [url="#"]products[/url]

         <ul>[*][url="#"]Subproduct 1[/url]      [*][url="#"]Subproduct 2[/url][*][url="#"]Subproduct 3[/url][/list]

         

      <li class="Toogler">[url="#"]services[/url]   [/list]

</div>



    [img]images/business_eyecatcher.jpg[/img] </div>

  <div id="container-content">

    <div id="content">

     </div>

  </div>

  <div id="container-footer">

    <div id="footer">

      <div id="footer-copyright"></div>

      <div id="footer-meta"></div>

    </div>

  </div>

</div>



</body>

</html>

**angelo85ct** · 14-12-2008, 15:52

e questo è il css:

Codice PHP:


body,html {

    margin: 0 0 0 0;

    padding: 0 0 0 0;

    height: 100%;

    width: 100%;

    background-color: #FFFFFF;

    background-image: url(images/bg_main.gif);

    background-repeat: repeat-x;

    font-family: Arial, Verdana, Helvetica, sans-serif;

    font-size: 12px;

    color: #666666;

}



#container {

    width: 750px;

    margin-top: 0px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 0px;

}



#container-header {

    width: 670px;

    height: 85px;

    padding: 20px 40px 0px 40px;

    background-image: url(images/bg_header.gif);

    line-height: 85px;

    font-size:28px;

    font-weight:bold;

}



#container-name {

    float: left;

}



#container-slogan {

    float: right;

    font-size: 18px;

    font-weight: normal;

    font-style: italic;

    padding-right: 10px;

}



span, #container-name span,#container-slogan span {

    color: #006AC3;

}



#container-eyecatcher {

    width: 670px;

    padding: 0px 40px 0px 40px;

    height: 175px;    

    background-image: url(images/bg_eyecatcher.gif);

}



#container-navigation {

    width: 670px;

    background-color: #45AAFF;

    height: 22px;

    border-bottom: 1px solid #ffffff;

}



ul#navigation {

    margin: 0 0 0 0;

    padding: 0 0 0 0;

}



#navigation li {

    display: inline;

    list-style: none;

    height: 22px;

}



#navigation li.Toogler{

   height: 20px;

   overflow: hidden;

}





#navigation li a {

    color: #ffffff;

    line-height: 22px;

    font-size: 11px;

    text-decoration: none;

    padding: 5px 15px 6px 15px;

    border-right: 1px solid #ffffff;

}



#navigation li a:hover {

    text-decoration: underline;

    background-color: #0066CC;

}



#container-content {

    width:670px;

    background-image: url(images/bg_content.gif);

    background-repeat: no-repeat;

    padding: 20px 40px 0px 40px;

    margin: 0 0 0 0;

    height: auto;

}



#content {

    width: 430px;

    float: left;

}



#border {

    width: 170px;

    margin-left: 480px;

}



#container-footer {

    border-top: 4px solid #E5E5E5;

    width: 670px;

    padding: 10px 0px 20px 0px;

    margin: 0 40px 0px 40px;

    clear: both;

    color: #aeaeae;

}



#container-footer a {

    font-weight: bold;

    padding: 2px 2px 2px 2px;

    color: #aeaeae;

}



#container-footer a:hover {

    color: #006AC3;

}



#footer {

    font-size: 11px;

    color: #aeaeae;

    width: 670px;

    margin-bottom: 20px;

}



#footer-copyright {

    float: left;

    width: 325px;

    padding-left: 10px;

}



#footer-meta {

    float: right;

    text-align: right;

    width: 325px;

    padding-right: 10px;

}



.clearer {

    clear: both;

}



h1 {

    font-size: 22px;

    color: #666666;

    margin: 0 0 0 0;

    padding: 0px 0 20px 25px;

    background-image: url(images/h1_arrow.gif);

    background-repeat: no-repeat;

    background-position: 5px 7px;

    line-height: 24px;

}



h2 {

    font-size: 16px;

    color: #006AC3;

    padding: 5px 0 5px 25px;

    letter-spacing: 1px;

    text-transform: uppercase;

}



h3 {

    font-size: 14px;

    color: #006AC3;

    padding: 5px 0 0px 25px;

    text-transform: uppercase;

    letter-spacing: -0.5px;

    }

    

h4 {

    font-size: 14px;

    color: #006AC3;

    text-transform: uppercase;

    letter-spacing: -0.5px;

    }



hr {

    border: none 0;

    border-top: 1px solid #cccccc;

    height: 1px;

}



#content hr {

    border: none 0;

    border-top: 1px solid #cccccc;

    margin: 0px 0 0px 25px;

    height: 1px;

}



#content p {

    line-height: 19px;

    color: #666666;

    margin: 0 0 20px 25px;

}



#content p a, #border p a {

    text-decoration: none;

    color: #006AC3;

    border-bottom: 1px dotted #006AC3;

    padding: 2px 2px 2px 2px;

}



#content p a:hover, #border p a:hover  {

    text-decoration: none;

    color: #FFFFFF;

    background-color: #006AC3;

    padding: 2px 2px 2px 2px;

}



#content li {

    line-height: 20px;

    color: #666666;

    margin: 0 0 0 15px;

}



#content .quote {

    border-top: 1px solid #E5E5E5;

    background-color: #f7f7f7;

    border-bottom: 1px solid #E5E5E5;

    padding: 15px 15px 15px 65px;

    background-image: url(images/bg_quote.gif);

    background-repeat: no-repeat;

    background-position: 10px 10px;

    color: #0066CC;

    font-style: italic;

}



#border p {

    line-height: 17px;

    font-size: 11px;

    color: #666666;

    margin: 0 0 15px 10px;

}



ul#subnavigation {

    padding: 0px 0px 0px 0px;

    margin: 0px 0px 15px 0px;

    background-image: none;

}



#subnavigation li {

    list-style: none;

    padding: 2px 0px 2px 10px;

    margin: 0px 0px 5px 0px;

}



#subnavigation li a {

    text-decoration: none;

    color: #006AC3;

    border-bottom: 1px dotted #006AC3;

}



#subnavigation li a:hover {

    text-decoration: none;

    border-bottom: 1px solid #006AC3;

}



ul#news {

    padding: 0px 0px 0px 0px;

    margin: 0px 0px 0px 0px;

    background-image: none;

}



#news li {

    list-style: none;

    background-image: url(images/li_cube.gif);

    background-repeat: no-repeat;

    background-position: 2px 6px;

    padding: 2px 0px 2px 15px;

    margin: 0 0 15px 0px;

}



#content img {

    background-color: #E7F1FF;

    padding: 4px;

    border: 1px solid #006AC3;

}



img.alignleft {

    float: left;

    margin: 0 15px 5px 0px;

}



img.alignright {

    float: right;

    margin: 0 0 5px 15px;

}



img.alignabove {

    margin: 0 0 10px 0;

}

**angelo85ct** · 14-12-2008, 15:53

ti ringrazio per l'aiuto che mi stai dando

Discussione: menu a tendina, chi mi puo aiutare?

Strumenti discussione

Ricerca discussione

Visualizza

menu a tendina, chi mi puo aiutare?

Permessi di invio