Вертикално меню

D

dELux_nike

Registered
Абе видях вертикалното меню и ми хареса а и ми стана интересно как се прави и реших да питам за едно уроче как става - а това коеето видях е тукк: http://cs.mugamer.com/
 
http://www.cssmenumaker.com/builder/menu_info.php?menu=048

Само си правиш твои картинки.
 
Е кажи какво става или не става? Не съм ясновидец. Пък и за такова елементарно нещо бих си го написал, не да го взимам от някъде.
 
shterev каза:
Пък и за такова елементарно нещо бих си го написал, не да го взимам от някъде.
Увеличете...

Ако можех ....
Аз затова поисках урок :idea:
 
Код: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
	
	ul {
		list-style-type:none; /* задаваме ноне за да няма булети(точки)*/
		padding:0px; margin:0px; /* изчистваме ги за да се вижда еднакво под браузърите*/
	}
	ul li {
		padding:2px 0 2px 0; margin:0px; /*задаваме паддинг за да има разстоянив от горе и от долу, между а-тата*/	
	}
	
	a.menu {
		padding:3px 0 0 0; /*малко падинг да наместим текста да е по жертикала в средата*/
		display:block;    /* правим блоков елемент, иначе няма да приеме ширина и височина*/
		width:150px; height:27px;
		background-color:#333333; /*цвета на бекграунда, като можеш да си добавиш и картинка, която ще се вижда когато мишката не е върху бутона*/
		color:#ffffff; /*цвят на текста*/
		text-align:center; /*центрираме текста*/
		
		background-image: url(snimka.gif); /*тук се задават картинки те трябва да са 150х30*/
		}
	a.menu:hover{ /* тук тоя код се чете когато мишката е върху бутона*/
			background-color:#999999; /*сменяме цвета на бекграунда*/
			color:#00F; /*сменяме цвета на текста*/
			
			background-image: url(snimka-2.gif);
	}
	
		
		
</style>
</head>

<body>
    <ul>
   		<li>
        	<a class="menu" href="#nogo">Menu 1</a>
        </li>
        <li>
	        <a class="menu" href="#nogo">Menu 2</a>
        </li>
        <li>
        	 <a class="menu" href="#nogo">Menu 3</a>
        </li>
    </ul>
</body>
</html>
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе