css - sublime - crear menu en html ejemplos
Evitar el envoltorio de los elementos del menú (5)
Creé una barra de navegación (menú) horizontal para mi sitio. Cuando redimensiono mi ventana a un tamaño más pequeño que el de la barra, los elementos del menú se envuelven. Quiero que el menú permanezca intacto (es decir, debe permanecer horizontal) independientemente del tamaño de la ventana, como suele verse en sitios como Google. Probé varias formas publicadas en varios foros, incluido este, pero nada me funcionó. A continuación he pegado mi código CSS para el menú.
CSS CODE:
#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 70px; background-color: #6699CC; box-shadow: 0px 2px 3px rgba(0,0,0,.4); }
#cssmenu > ul > li {
float: left;
margin-left: 30px;
position: relative;
}
#cssmenu > ul > li > a {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: #00FF00; }
body.home li.home, body.tech li.tech {font-weight:bold; }
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #FFFFFF;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '''';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
color: rgb(50,50,50);
font-family: Verdana, ''Lucida Grande'';
font-size: 13px;
background-color: rgb(250,250,250);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: rgb(250,250,250);
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
background-color: rgb(205,44,36);
color: rgb(240,240,240);
}
Código HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body class="home" background="teenscorner1.jpg" text="#FFFFFF" style="background-attachment: fixed">
<div id=''cssmenu''>
<ul>
<li class="home"><a href=''home.jsp''><span>Home</span></a></li>
<li class="tech"><a href=''tech.jsp''><span>Tech Specs</span></a></li>
<li><a href=''#''><span>Fun</span></a></li>
<li><a href="#"><span>Deals</span></a></li>
<li><a href="#"><span>Wheelz</span></a></li>
<li><a href=''#''><span>About</span></a></li>
</ul>
</div>
</body>
Cuando no conoce el ancho porque los enlaces pueden diferir en el ancho, puede usar display: inline-block en el elemento de la lista <li> y white-space:nowrap en la propia lista <ul>
Debe establecer un min-width #cssmenu > ul para #cssmenu > ul , uno que permita que todos los elementos de su menú se ajusten.
Estoy teniendo el mismo problema con los elementos de mi menú que se ajustan a la siguiente línea. Tomó algunos cambios. Primero, tuve que configurar <ul> para que tuviera una altura máxima y un desbordamiento configurados como ocultos. Entonces solo tuve que establecer un ancho para el contenedor principal.
En mi caso, ya que el diseño responde y los cambios en el área disponible (ya que el menú está flanqueado en ambos lados por elementos con anchos duros preestablecidos) tuve que expandir el área dada a medida que crece.
#primary-menu {
display: none;
}
@media screen and (min-width: 59em) {
#primary-menu {
display: inline-block;
width: 74%;
}
}
@media screen and (min-width: 64em) {
#primary-menu {
width: 78%;
}
}
@media screen and (min-width: 78.75em) {
#primary-menu {
width: 83%;
}
}
ul {
max-height: 53px;
overflow: hidden;
}
<div id="primary-menu" class="menu">
<ul class="menu menu__navigation--primary">
<li class="first leaf active-trail">
<a href="/equipment" class="active-trail active">Equipment</a>
</li>
<li class="leaf">
<a href="/solutions">Solutions</a>
</li>
<li class="leaf">
<a href="/services">Services</a>
</li>
<li class="leaf">
<a href="/locations">Locations</a>
</li>
<li class="leaf">
<a href="/our-company">Our Company</a>
</li>
<li class="last leaf">
<a href="/contact-us">Contact Us</a>
</li>
</ul>
</div>
La respuesta aceptada no funcionó en mi caso, pero sí la respuesta original de @Ana. Traté de agregar esto como un comentario a su respuesta, pero no encajaba. Poner un ancho mínimo en el UL como se sugiere, trajo todos los elementos LI de nuevo a una línea como se desea, pero esa línea se extendió a la derecha del div contenido. Agregué el mismo ancho mínimo a la división principal y obtuve lo que quería, todo el LI en una línea dentro del contenedor. Como paso final, eliminé el ancho mínimo de la UL (por lo que esta es una respuesta diferente, más general que la de Ana) y todo funcionó. En una cáscara de nuez, si hace que UL se ajuste en css como se documenta en la respuesta aceptada y se envuelva de todos modos, entonces asegúrese de dar el ancho suficiente a la lista para que no sea necesario envolverla. Otra forma de aumentar el ancho que también funciona (sin usar el ancho mínimo) es aumentar el ancho del área de contenido debajo de la UL en el div contenido. Mi caso era un DIV con pestañas, las LI eran las pestañas en la parte superior. Cada pestaña tenía contenido debajo de ella. Cuando el contenido de abajo era lo suficientemente ancho, los LI se quedaron en una fila. Podría haber puesto un ancho mínimo en cada contenido de la pestaña, pero para mí funcionó mejor ponerlo una vez en el contenedor exterior. HTH.
Supongo que estos son los elementos de la barra de navegación
<li class="home"><a href=''home.jsp''><span>Home</span></a></li>
<li class="tech"><a href=''tech.jsp''><span>Tech Specs</span></a></li>
<li><a href=''#''><span>Fun</span></a></li>
<li><a href="#"><span>Deals</span></a></li>
<li><a href="#"><span>Wheelz</span></a></li>
<li><a href=''#''><span>About</span></a></li>
si solo los pones asi
<li class="home"><a href=''home.jsp''><span>Home</span></a></li> <li class="tech"><a href=''tech.jsp''><span>Tech Specs</span></a></li> <li><a href=''#''><span>Fun</span></a></li> <li><a href="#"><span>Deals</span></a></li> <li><a href="#"><span>Wheelz</span></a></li> <li><a href=''#''><span>About</span></a></li>
eso es todo lo que tiene que hacer es unirlos todos juntos sin espacios entre las etiquetas li end y start, ahora eso los mostrará todos en línea sin espacios visualmente entre los elementos de navegación en su página cargada, por lo que es posible que no los quiera todos para unirse visualmente como su barra, así que también puse un código para un espacio entre las etiquetas li end y start, esto le dará un espacio único entre todas las etiquetas de navegación visualmente en la pantalla cargada, pero aún así permanecerán unidos por lo que no irá apostando si haces la pantalla estrecha.