arrotondare i bordi a menu verticale

06-10-2013, 11.09.43

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>

**karl94** · 06-10-2013, 13.12.28

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:

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

**karl94** · 29-10-2013, 00.59.07

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.

**RedWebSite** · 29-10-2013, 09.13.53

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

Discussione: arrotondare i bordi a menu verticale

LinkBack

Strumenti discussione

Display

arrotondare i bordi a menu verticale

Regole di scrittura