« anterior próximo »
Páginas: [1]   Ir Abajo

Autor Tema: Menú desplegable  (Leído 1007 veces)

Desconectado BlackDragon

  • PHPer@ Fijo
  • ***
  • Mensajes: 133
  • Karma: 0
  • Sexo: Masculino
    • Ver Perfil
Menú desplegable
« en: 08 de Septiembre de 2010, 11:51:19 am »
¡Hola!

Tengo una duda con un código, como es de varios lenguajes lo pongo aquí...

CSS
Código: [Seleccionar]
body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}

#nav a{
display:block;
padding:0px 16px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#2b2a33;
}

#nav a:hover{
background-color:#fff;
color:#2b2a33;
}

#nav li{
float:left;
position:relative;
}

#nav ul {
position:absolute;
display:none;
width:12em;
top:1.5em;
}

#nav li ul a{
width:12em;
height:auto;
float:left;
}

#nav ul ul{
top:auto;
}

#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
// MENU
Javascript:
Código: [Seleccionar]
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}

 
 
 $(document).ready(function(){
mainmenu();
});
HTML:
Código: [Seleccionar]
<ul id="nav">
    <li id="nav"><a href="#">&middot; Sitio</a>
    <ul><li><a href="/sitio/noticias">Noticias</a></li>
    <li> <a href="/sitio/blog">Blog</a></li>
    <li><a href="/sitio/staff">Staff</a></li>
    <li><a href="/sitio/trabajos-disponibles">Trabajos Disponibles</a></li>
    <li><a href="/sitio/historia">Historia</a></li>
    <li><a href="/sitio/afiliados">Afiliados</a></li>
    <li><a href="/sitio/contacto">Contacto</a></li></ul></li>
    <li id="nav"><a href="#">&middot; Punto 2</a>
    <ul><li><a href="menu1">Nombre1_Superior</a>
    <ul><li><a href="menu1">Nombre1_Inicio</a>
    <ul>
    <li><a href="menu1">Nombre1</a></li>
    <li><a href="menu1">Nombre1</a></li>
    <li><a href="menu1">Nombre1</a></li>
    <li><a href="menu1">Nombre1</a></li>
    <li><a href="menu1">Nombre1</a></li>
    <li><a href="menu1">Nombre1</a></li>
    <li><a href="menu1">Nombre1</a></li>
    <li><a href="menu1">Nombre1</a></li>
    <li><a href="menu1">Nombre1</a></li>
    <li><a href="menu1">Nombre1</a></li></ul>
    </li>
    <li><a href="menu2">Nombre2_Inicio</a><ul>
    <li><a href="menu2">Nombre2</a></li>
    <li><a href="menu2">Nombre2</a></li>
    <li><a href="menu2">Nombre2</a></li>
    <li><a href="menu2">Nombre2</a></li>
    <li><a href="menu2">Nombre2</a></li>
    <li><a href="menu2">Nombre2</a></li>
    <li><a href="menu2">Nombre2</a></li></ul>
    </li>
    </ul></li>
    <li><a href="menu3">Nombre 3_Superior</a></li>
    <li><a href="menu3">Nombre 4_Superio</a></li>
    <li><a href="menu3">Nombre 5_Superio</a></li>
    <li><a href="menu3">Nombre 6_Superio</a></li>
    <li><a href="menu3">Nombre 7_Superio</a></li>
    <li><a href="menu3">Nombre 8_Superio</a></li>
    <li><a href="menu3">Nombre 9_Superio</a></li></ul></li>
    <li id="nav"><a href="#">&middot; Enlaces</a>
      <ul>
            <li><a href="menu4">Nombre4</a></li>
            <li><a href="menu4">Nombre4</a></li>
            <li><a href="menu4">Nombre4</a></li>
            <li><a href="menu4">Nombre4</a></li>
            <li><a href="menu4">Nombre4</a></li>
            <li><a href="menu4">Nombre4</a></li>
      </ul></li>
      <li id="nav"><a href="#">&middot; Menu 5</a>
      <ul><li><a href="menu5">Nombre5</a></li>
      <li><a href="menu5">Nombre5</a></li>
      <li><a href="menu5">Nombre5</a></li>
      <li><a href="menu5">Nombre5</a></li>
      </ul></li>
    </li>
</ul>
¿Por qué me salen los puntitos de los <ul> <li>?
En línea

Comunidad PHPeros

Menú desplegable
« en: 08 de Septiembre de 2010, 11:51:19 am »

Desconectado Mixvice

  • PHPero Experto
  • *****
  • Mensajes: 687
  • Karma: 32
  • Sexo: Masculino
  • ¡Y Tu Papá Tambien!
    • Ver Perfil
    • Tuhabbo
Re:Menú desplegable
« Respuesta #1 en: 08 de Septiembre de 2010, 11:56:54 am »
A mi me sale bien...
http://www.tuhabbo.com/prueba.html

solo salen unos puntos pequeños a un lado de los apartados ej; . sitio Si es eso busca en el código html esto:
Código: [Seleccionar]
&middot;
En línea

Desconectado BlackDragon

  • PHPer@ Fijo
  • ***
  • Mensajes: 133
  • Karma: 0
  • Sexo: Masculino
    • Ver Perfil
Re:Menú desplegable
« Respuesta #2 en: 08 de Septiembre de 2010, 12:00:18 pm »
Si ese si, pero a mi me sale con los puntos de los li y ul...que raro...quizás tengo algo extraño, copiaré y pegaré de acá...

Gracias ^^

Pues ahora si me funciona xD K+ por hacerme darme cuenta de que estoy dormido aún  xD
« Última modificación: 08 de Septiembre de 2010, 12:02:38 pm por BlackDragon »
En línea

Desconectado Mixvice

  • PHPero Experto
  • *****
  • Mensajes: 687
  • Karma: 32
  • Sexo: Masculino
  • ¡Y Tu Papá Tambien!
    • Ver Perfil
    • Tuhabbo
Re:Menú desplegable
« Respuesta #3 en: 08 de Septiembre de 2010, 12:03:15 pm »
De pronto y pusiste mal el css xd suerte!  ;)
En línea

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:Menú desplegable
« Respuesta #4 en: 08 de Septiembre de 2010, 12:39:08 pm »

Ahora que ya está todo correcto.. ¿Puedo hacer una pregunta?. En el codigo CSS he visto que en el
atributo de font-size, pones 0.85em. ¿Que quiere decir esa caracteristica?.

Consejo: En la prueba que ha puesto mixvice, al entrar en los submenus de los submenus, las
capas se comen las otras. Solucionalo.
En línea

#Fdo. Physlet

Desconectado BlackDragon

  • PHPer@ Fijo
  • ***
  • Mensajes: 133
  • Karma: 0
  • Sexo: Masculino
    • Ver Perfil
Re:Menú desplegable
« Respuesta #5 en: 08 de Septiembre de 2010, 13:57:19 pm »
Cuando yo investigué sobre em, encontré esto: Un “em” mide exactamente el ancho de la letra “M” mayúscula de una tipografía dada y a un tamaño dado. Efectivamente, según esta definición un “em” no mide físicamente siempre lo mismo. ¿Por qué se usa esta medida? porque el ancho óptimo para la lectura dependerá, necesariamente, del tipo de letra que se use y, más necesariamente aún, del tamaño de ésta. Sobre lo de que se comen a otras...¿se arreglaría con overflow:hidden o se ocultaría de ese modo?
« Última modificación: 08 de Septiembre de 2010, 13:59:27 pm por BlackDragon »
En línea

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:Menú desplegable
« Respuesta #6 en: 08 de Septiembre de 2010, 14:13:12 pm »
Cita de: BlackDragon en 08 de Septiembre de 2010, 13:57:19 pm
Cuando yo investigué sobre em, encontré esto: Un “em” mide exactamente el ancho de la letra “M” mayúscula de una tipografía dada y a un tamaño dado. Efectivamente, según esta definición un “em” no mide físicamente siempre lo mismo. ¿Por qué se usa esta medida? porque el ancho óptimo para la lectura dependerá, necesariamente, del tipo de letra que se use y, más necesariamente aún, del tamaño de ésta. Sobre lo de que se comen a otras...¿se arreglaría con overflow:hidden o se ocultaría de ese modo?

Gracias por la aclaración y yo no te puedo ayudar, lo mio no es el diseño ni el CSS jeje! Saludos.
En línea

#Fdo. Physlet

Desconectado Tope

  • PHPero Experto
  • *****
  • Mensajes: 540
  • Karma: 23
  • Sexo: Masculino
  • Programador PHP
    • Ver Perfil
    • www.Info-Keko.Es
Re:Menú desplegable
« Respuesta #7 en: 08 de Septiembre de 2010, 14:29:10 pm »
Cita de: BlackDragon en 08 de Septiembre de 2010, 13:57:19 pm
Cuando yo investigué sobre em, encontré esto: Un “em” mide exactamente el ancho de la letra “M” mayúscula de una tipografía dada y a un tamaño dado. Efectivamente, según esta definición un “em” no mide físicamente siempre lo mismo. ¿Por qué se usa esta medida? porque el ancho óptimo para la lectura dependerá, necesariamente, del tipo de letra que se use y, más necesariamente aún, del tamaño de ésta. Sobre lo de que se comen a otras...¿se arreglaría con overflow:hidden o se ocultaría de ese modo?

Un "em" es el tamaño "100%"  de cualquier fuente, que también equivaldría a aproximadamente 16 pixels (px) o 12 puntos (pt)

Es preferible usar "em", puesto que cada navegador y sistema operativo interpreta los "px" de forma diferente, en cambio si usamos "em", el tamaño de la tipografía será igual en ¿IE?, Firefox, Chrome, Opera, Safari, tanto en Windows, Mac o cualquier distro de Linux.
« Última modificación: 08 de Septiembre de 2010, 14:31:50 pm por Tope »
En línea
Un Saludo, Tope >> Programador FIJO en PHPeros

Desconectado OmaarV

  • PHPero Avanzado
  • ****
  • Mensajes: 304
  • Karma: 20
  • Sexo: Masculino
  • OmarVega
    • Ver Perfil
Re:Menú desplegable
« Respuesta #8 en: 08 de Septiembre de 2010, 21:09:29 pm »
Mira un menu que yo hice:

HTML:
Código: [Seleccionar]
      <ul id="menu">
            <li><a href="#">Menu</a>
                <ul>
                    <li><a href="#">SubMenu</a></li>
                    <li><a href="#">SubMenu</a></li>
                </ul>
            </li>
            <li><a href="#">Menu</a>
                <ul>
                    <li><a href="#">SubMenu</a></li>
                    <li><a href="#">SubMenu</a></li>
                    <li><a href="#">SubMenu</a></li>
                </ul>
            </li>

            <li><a href="#">No Submenu</a></li>
        </ul>
CSS:
Código: [Seleccionar]
#menu {
width:100%;
}

#menu, #menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#menu li {
  float: left;
  background: #FFF;
}

#menu a {
  display: block;
  padding: 5px;
  width: 130px;
}

#menu li ul {
  position: absolute;
  left: -999em;
  width: 140px;
}

#menu li:hover ul, #menu li ul:hover {
  left:auto;
}

Aquí te debería ir muy bien pero yo le agregue un poco de efecto con jQuery.
Código: [Seleccionar]
$(document).ready(function(){
  $('#menu li ul').css({
    display: "none",
    left: "auto"
  });
  $('#menu li').hover(function() {
    $(this)
      .find('ul')
      .stop(true, true)
      .slideDown('fast');
  }, function() {
    $(this)
      .find('ul')
      .stop(true,true)
      .fadeOut('fast');
  });
});

Cuéntame como te funciono (:
« Última modificación: 08 de Septiembre de 2010, 21:17:10 pm por OmaarV »
En línea
Páginas: [1]   Ir Arriba
« anterior próximo »