[Tutorial] Menus Despegables.
Bueno ya que no existe ningun tutorial, voy a hacer un copy paste ya que a muchos les servira como ami.. Primero: Vamos a nuestras plantillas de hea...

Bueno ya que no existe ningun tutorial, voy a hacer un copy paste ya que a muchos les servira como ami..

Primero: Vamos a nuestras plantillas de header y borramos los <ul> es decir esto (ejemplo del theme Default)
Código PHP:
<ul>
                                        <
li><a href="{$mybb->settings['bburl']}/portal.php" class="home">Portal</a></li>
                    <
li><a href="{$mybb->settings['bburl']}/index.php" class="home">Foro</a></li>
                    <
li><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
                    <
li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
                    <
li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
                    <
li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
                                    </
ul

Y los reemplazamos por esto:
Código PHP:
<ul class="mi-menu">
  <
li><a href="URL_enlace_1"texto_enlace_1 </a></li>
  <
li>
    <
a href="#"texto_enlace_2 </a>
    <
ul>
      <
li><a href="URL_enlace_2.1"texto_submenú_2.1 </a></li>
      <
li><a href="URL_enlace_2.2"texto_submenú_2.2 </a></li>
      <
li><a href="URL_enlace_2.3"texto_submenú_2.3 </a></li>
    </
ul>
  </
li>
  <
li><a href="URL_enlace_3"texto_enlace_3 </a></li>
</
ul
Aca luego se supone que ustedes editan las rutas y los nombres,etc..

Segundo: Agregamos los css en nuestro Global CSS para que el efecto de menus despegables sirva ^^
Código PHP:
.mi-menu  {
    
border-radius5px;
    list-
style-typenone;
    
margin0 auto;
    
padding0;
    
height40px
    
width510px;
    
background#555;
    
background: -moz-linear-gradient(#555,#222);
    
background: -webkit-linear-gradient(#555,#222);
    
background: -o-linear-gradient(#555,#222);
    
background: -ms-linear-gradient(#555,#222);
    
backgroundlinear-gradient(#555,#222);
  
}
.
mi-menu  br display:none; }

.
mi-menu  li {
    
displayblock;
    
floatleft;
    
height40px;
    list-
stylenone;
    
margin0;
    
padding0;
    
positionrelative;
  }
  .
mi-menu li a {
    
border-left1px solid #000;
    
border-right1px solid #666;
    
color#EEE;
    
displayblock;
    
font-familyTahoma;
    
font-size13px;
    
font-weightbold;
    
line-height28px;
    
padding0 14px;
    
margin6px 0;
    
text-decorationnone;
    -
webkit-transitioncolor .2s ease-in-out;
    -
moz-transitioncolor .2s ease-in-out;
    -
o-transitioncolor .2s ease-in-out;
    -
ms-transitioncolor .2s ease-in-out;
    
transitioncolor .2s ease-in-out;
  }
 .
mi-menu li:first-child a border-leftnone; }
 .
mi-menu li:last-child aborder-rightnone; }
 .
mi-menu li:hover colorCrimson; }

 .
mi-menu ul {
    
border-radius0 0 5px 5px;
    
left0;
    
margin0;
    
opacity0;
    
positionabsolute;
    
top40px;
    
background#222;
    
background: -moz-linear-gradient(#222,#555);
    
background: -webkit-linear-gradient(#22,#555);
    
background: -o-linear-gradient(#222,#555);
    
background: -ms-linear-gradient(#222,#555);
    
backgroundlinear-gradient(#222,#555);
    
-moz-transitionopacity .25s ease .1s;
    -
webkit-transitionopacity .25s ease .1s;
    -
o-transitionopacity .25s ease .1s;
    -
ms-transitionopacity .25s ease .1s;
    
transitionopacity .25s ease .1s;
  }
 .
mi-menu li:hover ul opacity1; }

 .
mi-menu ul li {
    
height0
    
overflowhidden;
    
padding0;
     -
moz-transitionheight .25s ease .1s;
    -
webkit-transitionheight .25s ease .1s;
    -
o-transitionheight .25s ease .1s;
    -
ms-transitionheight .25s ease .1s;
    
transitionheight .25s ease .1s;
  }
  .
mi-menu li:hover ul li {
    
height36px;
    
overflowvisible;
    
padding0;
  }
  .
mi-menu ul li a {
    
bordernone;
    
border-bottom1px solid #111;
    
margin0;
    
padding5px 20px;
    
width100px;
  }
 .
mi-menu ul li:last-child a bordernone; } 

3) Deberia quedar como en esta imagen
[Imagen: preview.png]

CREDITOS:
http://designmodo.com/css3-dropdown-menu/

PD: Lo pongo este tutorial ya que no existe ninguno de menus despegables ^^ y vale la pena ya que sirve mucho.
[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]
Última modificación: 11 Jan, 2013, 12:27 pm por fabiibiografiia.
mmmm lindo voy a probar en mi local a ver que y depende de como me vaya lo coloco en el foro gracias te dejo reputacion
Lo voy a probar y cuento espero no liarla mucho :S