D4rkAng3l
12-10-2007, 10:10
Ciao,
ho incrociato insieme due tipi di menu, per essere precisi sono partito da questo presentato su Html.it: http://css.html.it/articoli/leggi/2385/breadcrumb-con-i-css/
e lvisto che volevo un menu a tendina a doppio livello (cioè che passando il mouse su ogni elemento del menu mi si apra un sotto menu verticale) l'ho incrociato con questo:
http://www.cssplay.co.uk/menus/drop_definition.html (il codice di questo lo potete vedere semplicemente visualizzando il codice dal broswer se volete).
Per me come principiante è stato un po' un lavoraccio lungo e faticoso perchè ho dovuto cambiare notevolmente la struttura logica del primo menu mantenendone comunque l'asppetto grafico e l'effeto stile rollover ma alla fine sono riuscito a tirar fuori qualcosa di pseudo decente data la mia inesperienza con i CSS, potete visualizzare quà il mio risultato: http://www.siatec.net/andrea/archivio/menu/menu.html
Vi chiedo un parere sul mio risultato e sull'idea e una manina a sistemare gli ultimi dettagli estetici che non riesco a risolvere da solo...
Le cose che non mi tornano e che vorrei cambiare sono:
1) La disposizione del testo degli elementi nel menu principale (DEMOS, MENU, LAYOUT,...) se vedete a sinistra c'è molto spazio...vorrei ottenere qualcosa come su http://www.siatec.net/andrea/archivio/megattera/ (che fa uso semplicemente del primo tipo di menu) dove i "titoli" di ogni elemento del menu sono ben centrati.
2)Quando si passa il mouse su un elemento del menu si apre una tendina blu verticale con il relativo sotto menu, con i CSS sarebbe possibile renderla lievemente trasparente tale tendina (cioè sempre blu ma con una certa trasparenza che lasci intravedere quello che c'è sotto)
Avete qualche altra idea per migliorarne l'aspetto estetico?
Vi allego il mio codice XHTML e CSS:
XHTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>menu multilivello</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<link href="layout.css" rel="stylesheet" type="text/css" title="default" />
</head>
<body>
<ul id="menu">
<li>
<dl class="gallery">
<dt class="one" id="mouse"><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
<dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="two" id="mouse"><a href="index.html">MENUS</a></dt>
<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
<dd class="last"><a href="circles.html" title="circular links">circular links</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="three" id="mouse"><a href="../layouts/index.html">LAYOUTS</a></dt>
<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
<dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="four" id="mouse"><a href="../mozilla/index.html">MOZILLA</a></dt>
<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
<dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
</li>
</ul>
</body>
</html>
CSS:
body{
font-family: arial, helvetica, verdana, tahoma, sans-serif;
font-size: 80%;
color: #000;
}
ul#menu{
list-style-type:none;
padding:0;
float: left;
width: 760px;
height: 40px;
line-height: 40px;
background: #D4D4D4 url("img/bcbk.png");
}
ul#menu li{
float: left;
height: 40px;
margin: 0 0.2em 0;
padding: 0;
background: url("img/bcbk1.png") no-repeat top right;
color: #777;
text-decoration: none;
}
ul#menu li:hover{
background-position: bottom right;
color: #0876AC;
}
ul#menu li a{
text-decoration: none;
}
ul#menu li a:visited{
text-decoration: none;
}
ul#menu li dd{
display: none;
}
ul#menu li:hover, ul#menu li a:hover{
border: 0;
}
ul#menu li:hover dd, ul#menu li a:hover dd{
display: block;
}
ul#menu li:hover dl, ul#menu li a:hover dl{
padding-bottom: 20px;
}
ul#menu table{
border-collapse:collapse;
padding:0;
margin:-1px;
font-size:1em;
}
ul#menu dl{
width: 150px;
margin: 0;
padding: 0;
text-align:center;
cursor:pointer;
}
ul#menu dt{
margin:0;
padding: 0;
font-size: 1.1em;
color: #fff;
}
ul#menu dd{
margin: 0;
padding: 0;
color: #FFFFFF
font-size: 1em;
background: #47a;
text-align: left;
}
ul#menu dd.last{
border-bottom: 1px solid #444;
}
.gallery dt a, .gallery dt a:visited{
display:block;
color:#444;
}
.gallery dd a, .gallery dd a:visited{
color:#fff;
text-decoration:none;
display:block;
padding:4px 5px 4px 20px;
background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;
}
.gallery dd a:hover{
background: #258 url(arrowr.gif) no-repeat 11px 10px;
color:#9cf;
}
Grazie mille
Andrea
ho incrociato insieme due tipi di menu, per essere precisi sono partito da questo presentato su Html.it: http://css.html.it/articoli/leggi/2385/breadcrumb-con-i-css/
e lvisto che volevo un menu a tendina a doppio livello (cioè che passando il mouse su ogni elemento del menu mi si apra un sotto menu verticale) l'ho incrociato con questo:
http://www.cssplay.co.uk/menus/drop_definition.html (il codice di questo lo potete vedere semplicemente visualizzando il codice dal broswer se volete).
Per me come principiante è stato un po' un lavoraccio lungo e faticoso perchè ho dovuto cambiare notevolmente la struttura logica del primo menu mantenendone comunque l'asppetto grafico e l'effeto stile rollover ma alla fine sono riuscito a tirar fuori qualcosa di pseudo decente data la mia inesperienza con i CSS, potete visualizzare quà il mio risultato: http://www.siatec.net/andrea/archivio/menu/menu.html
Vi chiedo un parere sul mio risultato e sull'idea e una manina a sistemare gli ultimi dettagli estetici che non riesco a risolvere da solo...
Le cose che non mi tornano e che vorrei cambiare sono:
1) La disposizione del testo degli elementi nel menu principale (DEMOS, MENU, LAYOUT,...) se vedete a sinistra c'è molto spazio...vorrei ottenere qualcosa come su http://www.siatec.net/andrea/archivio/megattera/ (che fa uso semplicemente del primo tipo di menu) dove i "titoli" di ogni elemento del menu sono ben centrati.
2)Quando si passa il mouse su un elemento del menu si apre una tendina blu verticale con il relativo sotto menu, con i CSS sarebbe possibile renderla lievemente trasparente tale tendina (cioè sempre blu ma con una certa trasparenza che lasci intravedere quello che c'è sotto)
Avete qualche altra idea per migliorarne l'aspetto estetico?
Vi allego il mio codice XHTML e CSS:
XHTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>menu multilivello</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<link href="layout.css" rel="stylesheet" type="text/css" title="default" />
</head>
<body>
<ul id="menu">
<li>
<dl class="gallery">
<dt class="one" id="mouse"><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
<dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="two" id="mouse"><a href="index.html">MENUS</a></dt>
<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
<dd class="last"><a href="circles.html" title="circular links">circular links</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="three" id="mouse"><a href="../layouts/index.html">LAYOUTS</a></dt>
<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
<dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="four" id="mouse"><a href="../mozilla/index.html">MOZILLA</a></dt>
<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
<dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
</li>
</ul>
</body>
</html>
CSS:
body{
font-family: arial, helvetica, verdana, tahoma, sans-serif;
font-size: 80%;
color: #000;
}
ul#menu{
list-style-type:none;
padding:0;
float: left;
width: 760px;
height: 40px;
line-height: 40px;
background: #D4D4D4 url("img/bcbk.png");
}
ul#menu li{
float: left;
height: 40px;
margin: 0 0.2em 0;
padding: 0;
background: url("img/bcbk1.png") no-repeat top right;
color: #777;
text-decoration: none;
}
ul#menu li:hover{
background-position: bottom right;
color: #0876AC;
}
ul#menu li a{
text-decoration: none;
}
ul#menu li a:visited{
text-decoration: none;
}
ul#menu li dd{
display: none;
}
ul#menu li:hover, ul#menu li a:hover{
border: 0;
}
ul#menu li:hover dd, ul#menu li a:hover dd{
display: block;
}
ul#menu li:hover dl, ul#menu li a:hover dl{
padding-bottom: 20px;
}
ul#menu table{
border-collapse:collapse;
padding:0;
margin:-1px;
font-size:1em;
}
ul#menu dl{
width: 150px;
margin: 0;
padding: 0;
text-align:center;
cursor:pointer;
}
ul#menu dt{
margin:0;
padding: 0;
font-size: 1.1em;
color: #fff;
}
ul#menu dd{
margin: 0;
padding: 0;
color: #FFFFFF
font-size: 1em;
background: #47a;
text-align: left;
}
ul#menu dd.last{
border-bottom: 1px solid #444;
}
.gallery dt a, .gallery dt a:visited{
display:block;
color:#444;
}
.gallery dd a, .gallery dd a:visited{
color:#fff;
text-decoration:none;
display:block;
padding:4px 5px 4px 20px;
background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;
}
.gallery dd a:hover{
background: #258 url(arrowr.gif) no-repeat 11px 10px;
color:#9cf;
}
Grazie mille
Andrea