Como diseño un menu con viñetas?

hunter18 · #1 (**permalink**) 12/07/2008, 17:35

Quiero un diseño igual a http://www.alternate.es/html/productDetails.html?artno=IMFLN2 funciona en internet explores y en firefox.
Diseñe uno similar a la guerra, pero demora un monton en cargar y no funciona en firefox.
De css no se mucho, pero si de php, la lista del menu seran registrso de la bd, pero solo me interesa el diseño con css, como esta hecho este menu, con div o listas

Espero me ayuden con el codigo css

saludos

dacho · #2 (**permalink**) 12/07/2008, 19:14

Hola, el menu que quieres hacer se puede encontrar en la red. Te recomiendo que busques un poco en este foro o en google sobre eso. Yo siempre por casualidad he cruzado varios tutoriales sobre el tema. Si quieres puedes aprender a ahcerlo desde 0 pero creo que es algo complicado, principalemente para el caso de que sea compatible con los distintos navegadores.

No estoy 100% seguro pero creo que el menu que queres hacer en este caso necesita una pequeña ayuda en javascript.

Creeme que esta lleno de tutoriales y codigos para que puedas ver como crear el tuyo a partir de esos. Ademas al ser css y javascript te los puedes chupar para tu maquina y analizar el codigo de este que te gusta.

Saludos, Damian.

KingColt · #3 (**permalink**) 13/07/2008, 18:27

En este tutorial hay un ejemplo

basta con esto
#navi { list-style-image:url(images/vineta.png);}

hunter18 · #4 (**permalink**) 13/07/2008, 18:30

hola a todos
las imagenes de las viñetas se descuadran miren la imagen
http://www.subetela.com/f/q/d/8/14464.png

Por favor algun experto en css, q me ayude a solucionar el problema, necesito un menu igual al del 1er post

saludos y espero su colaboracion

Mikmoro · #5 (**permalink**) 13/07/2008, 18:40

Ese menú no está hecho con viñetas; ni siquiera con listas (li).

Cada elemento del menú es un div, que tiene puesto de fondo un gráfico, un padding-left de 10px y dentro un enlace.

Mikel.

Mikmoro · #6 (**permalink**) 13/07/2008, 18:43

Mira un elemento cualquiera:

HTML:

Cita:

<div class="TreeFol_level1">
<a href="/html/highlights.html?hgid=9&tgid=66&treeName=HARDWARE&L evel1=Barebones&" target="">Barebones</a>
</div>

CSS:

Cita:

.TreeFol_level1 { padding-left:10px; margin-right:1px; background:url(/pix/icons/navArrowRight.gif) 2px 7px no-repeat }

Mikel.

hunter18 · #7 (**permalink**) 14/07/2008, 10:25

Que tal mikmoro
Como podria optimizar el codigo, para utilizar un solo div y no estar repitiendolo
<div class="TreeFol_level1">
<a href="#" target="">Barebones</a>
</div>
o quizas otro codigo css que haga lo mismo?, de todos modos gracias

Mikmoro · #8 (**permalink**) 14/07/2008, 10:58

Mira, una manera de hacerlo es esta: coges su imagen (o una tuya)

http://www.alternate.es/pix/icons/navArrowRight.gif

la pones como fondo del elemento "a" y a este le das un espacio con text-indent y la desplazas hasta que esté donde tú quieres.

Mira este simple ejemplo:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
#menu ul {
font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
list-style-type:none
}
#menu a {
display: block;
width: 100px;
background: url(img/navArrowRight.gif) no-repeat left 5px;
text-indent: 14px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li><a href="#">Cuatro</a></li>
</ul>
</div>
</body>
</html>

Ellos lo han hecho con el div porque de esta manera que te pongo, si ahora hace que se subrayen al pasar el ratón (por ejemplo), se subraya todo, incluido el gráfico.
Hay más maneras, pero hay que meterle un rato.

Mikel.

Mikmoro · #9 (**permalink**) 14/07/2008, 12:25

Una forma mejor de hacerlo:

Cita:

<!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" lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
#menu ul {
font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
list-style-type:none
}
#menu ul li {background: url(img/navArrowRight.gif) no-repeat left center;
}
#menu a{
display: block;
width: 100px;
text-indent: 14px;
text-decoration: none;
}
#menu a:hover {text-decoration: underline;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li><a href="#">Cuatro</a></li>
</ul>
</div>
</body>
</html>

Mikel.

Keyciiz · #10 (**permalink**) 26/12/2015, 03:33

por fa, alguien que me diga como hacer este tipo de menu...

http://www.agccalidad.com.mx/index.html

Keyciiz · #11 (**permalink**) 26/12/2015, 03:35

Cita:

Iniciado por Keyciiz

por fa, alguien que me diga como hacer este tipo de menú...

http://www.agccalidad.com.mx/index.html