arrotondare i bordi a menu verticale

Printable View

06-10-2013, 11.09.43

arrotondare i bordi a menu verticale

Salve a tutti
avrei bisogno di arrotondare i bordi ad un menù verticale a tendina (in realtà per ora è solo un prototipo) ma non sò per quale motivo se utilizzo la proprietà border-radius non me li arrotonda; avrei anche bisogno di rendere meno scattosa l'apertura dei sottomenù a tendina e qui non saprei proprio come fare; in poche parole vorrei rendere più bello questo menù che così com'è ora fa un pò schifo. Se questo non si può migliorare potreste consigliarmi un'altro menù purchè sia a tendina verticale. Grazie in anticipo posto il codice:

Codice HTML:

<head> <title>Menu Verticale Tenda a Livelli</title> </head> <body > <br /><br /> <div align="left"> <DIV ID=mv2></DIV> <script LANGUAGE="JavaScript"> document.write('<STYLE TYPE="text/css">\na.mv2style {color:#aaaaaa;font-size:12px;text-decoration:none;}\na:hover.mv2style {color:#B1F332;text-decoration:underlined;}\n</STYLE>'); mv2_menu = new Array(); mv2_lien = new Array(); mv2_menu[0] = '<b>Carrara</b>'; mv2_menu[1] = '<b>Eventi</b>'; mv2_menu[2] = '<b>Le Chitarre di Marmo</b>'; mv2_menu[3] = '<b>Le Chitarre di Maurì</b>'; mv2_lien[0] = '<A HREF="http://canarinomannaro2.altervista.org/le-cave.html" CLASS=mv2style TARGET="_self"> . Le Cave</A><BR>' mv2_lien[1] = '<A HREF="http://www.septemberfest.it/" CLASS=mv2style TARGET="_self"> . Festa della Birra</A><BR>' mv2_lien[2] = '<A HREF="" CLASS=mv2style TARGET="_self"> . La Stratocaster</A><BR>'; mv2_lien[3] = '<A HREF="" CLASS=mv2style TARGET="_self"> . Custom 336 </A><BR>'; mv2_lien[0] += '<A HREF="" CLASS=mv2style TARGET="_self"> . Piazza Alberica</A><BR>'; mv2_lien[0] += '<A HREF="" CLASS=mv2style TARGET="_self"> . Piazza D Armi</A><BR>'; mv2_lien[0] += '<A HREF="" CLASS=mv2style TARGET="_self"> . Piazza Farini</A><BR>'; mv2_lien[1] += '<A HREF="https://it-it.facebook.com/CarrararocknrollaPollegeFestival" CLASS=mv2style TARGET="_self"> . Carrararocknrolla</A><BR>'; mv2_lien[2] += '<A HREF="" CLASS=mv2style TARGET="_self"> . La Telecaster</A><BR>'; mv2_lien[3] += '<A HREF="" CLASS=mv2style TARGET="_self"> . Les Paul </A><BR>'; mv2_lien[3] += '<A HREF="" CLASS=mv2style TARGET="_self"> . Flying </A><BR>'; mv2_lien[3] += '<A HREF="" CLASS=mv2style TARGET="_self"> . Telecaster </A><BR>'; mv2_pos = -1; function mv2_menu_draw() { mv2_aff = "<TABLE BORDER=0 BGCOLOR=#ffffff CELLPADDING=0 CELLSPACING=0 WIDTH=180><TR><TD><TABLE BORDER=0 CELLPADDING=9 CELLSPACING=1 WIDTH=100%>"; for(a=0;a<mv2_menu.length;a++) { if(mv2_pos == a || !document.getElementById) bgcolor = "#000000"; else bgcolor = "#000000"; if(document.getElementById) mv2_aff += "<TR><TD border-radius=4px BGCOLOR="+bgcolor+"><A HREF=\"#\" onMouseOver=\"mv2_pos="+a+";mv2_menu_draw()\" CLASS=mv2style><FONT FACE=\"Verdana\" SIZE=2>"+mv2_menu[a]+"</FONT></A></TD></TR>"; else mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Verdana\" SIZE=2 COLOR=#000000>"+mv2_menu[a]+"</FONT></TD></TR>" if(mv2_pos == a || !document.getElementById) mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Verdana\" SIZE=1>"+mv2_lien[a]+"</FONT></TD></TR>"; } mv2_aff += "</TABLE></TD></TR></TABLE>"; if(document.getElementById) document.getElementById("mv2").innerHTML = mv2_aff; else document.write(mv2_aff); } mv2_menu_draw(); </script> </div> <br /><br /><br /><br /><br /><br /> <div align="center"> </div> </body> </html>
06-10-2013, 13.12.28
karl94

Hmm, vedo codice vecchio, problematico e tanta confusione tra proprietà CSS e attributi HTML.
Anzitutto non è necessario usare JavaScript: il fatto che tu non abbia voglia di includere nel sorgente tutte le voci manualmente non è una scusante, e nel caso in cui la pagina venga visualizzata all'interno di un borwser che non supporta JavaScript, o anche più semplicemente, se viene letta da un crawler di un motore di ricerca, i collegamenti non saranno disponibili.
Per realizzare un menù a tendina, oggigiorno è sufficiente un po' di HTML e CSS. Cercando un attimo trovi milioni di esempi già pronti, basta usare le parole giuste. Cercando dropdown menu dovresti avere già abbastanza risultati. Abbi solo l'accortezza di non andare a prendere codice non recente.
06-10-2013, 14.05.06

innanzitutto grazie della risposta,
come avrai capito non sono un'aquila, seguirò il tuo consiglio e farò una ricerca come mi hai consigliato ma, avevo già fatto delle ricerche e non sono riuscito a trovare un menù come vorrei e cioè tipo questo che ti posto sotto ma un pò più bello:

https://lh5.googleusercontent.com/-0...28/Cattura.png
19-10-2013, 14.12.05

è possibile aggiungere i sottomenu a questo menu?

Codice HTML:

<style> ul.svertical{ width: 200px; /* width of menu */ overflow: auto; background: black; /* background of menu */ margin: 0; padding: 0; padding-top: 7px; /* top padding */ list-style-type: none; } ul.svertical li{ text-align: right; /* right align menu links */ } ul.svertical li a{ position: relative; display: inline-block; text-indent: 5px; overflow: hidden; background: rgb(127, 201, 68); /* initial background color of links */ font: bold 16px Germand; text-decoration: none; padding: 5px; margin-bottom: 7px; /* spacing between links */ color: black; -moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */ -webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); -moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */ -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } ul.svertical li a:hover{ padding-right: 30px; /* add right padding to expand link horizontally to the left */ color: black; background: rgb(153,249,75); -moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */ -webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8); box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8); } ul.svertical li a:before{ /* CSS generated content: slanted right edge */ content: ""; position: absolute; left: 0; top: 0; border-style: solid; border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */ border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */ } </style> <ul class="svertical"> <li><a href="http://canarinomannaro2.altervista.org/">Carrara</a></li> <li><a href="http://canarinomannaro2.altervista.org/" >Eventi</a></li> <li><a href="http://canarinomannaro2.altervista.org/">Le Chitarre di Marmo</a></li> <li><a href="http://canarinomannaro2.altervista.org/">Le Chitarre di Mauri</a></li> <li><a href="http://canarinomannaro2.altervista.org/">L Plin Pio</a></li> <li><a href="http://canarinomannaro2.altervista.org/">Siamo di Fuori</a></li> </ul>
25-10-2013, 21.33.07

nessuno che mi aiuta per favore
29-10-2013, 00.59.07
karl94

Possibile è sicuramente possibile, ma ci vuole un po' di lavoro. Non riesci proprio a trovarne uno già pronto? Magari con solo qualche piccola modifica da apportare.
29-10-2013, 09.13.53
RedWebSite

ciao, non so se ho capito esattamente quello che vuoi fare, però andando ad inserire una regola border-radius 20px; sul file style.css alla riga 118 trovi cosi

Codice:

#sidebar .widget { background-color: #161616; border-color: #CA106F;

io ho provato ad inserire il codice a 20px tramite firebug cosi

Codice:

#sidebar .widget { background-color: #161616; border-color: #CA106F; border-radius: 20px;

tu puoi modificare i px per ottenere la curva che vuoi, puoi aiutarti con questo sito, questo nell'immagine è il risultato come ti ho detto inserendolo a 20px, spero di aver capito cosa volevi fare e di esserti stato di aiuto

http://i39.tinypic.com/2ywicqu.jpg