Хубаво вертикално меню

picha925 трудност:

видян: 25576

Какво ще ни трябва?

1. Изтеглете тази картинка

2. Трябва ни една папка 'menu4' ще се казва тя

3. После влезте в папката която направихте и направете още една папка на име 'images'

4. Направете един документ 'index.html' този документ правите в папка 'menu4'

5. Най - накрая картинката която изтеглихте сложете в папката 'images'

А сега ето и скрипта:

<!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"

xml:lang="en" lang="en">
<head>
<title>Menu Design 4</title>
<meta http-equiv="Content-Type"

content="text/html; charset=ISO-8859-1" />
<meta name="description" content="CSS menus free

for all" />
<meta name="keywords" content="CSS, css, CSS

menu, CSS design, css design, CSS menu design,

e-lusion, Ian, ian, e-lusion.com" />
<meta name="author" content="Ian Main" />
<meta name="Copyright" content="Creative Commons

- http://creativecommons.org/licenses/by/2.0/" />
<style type="text/css">

body {
font-family: Verdana, Arial, Helvetica,

sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

/* =-=-=-=-=-=-=-[Menu Four]-=-=-=-=-=-=-=- */

#menu4 {
width: 200px;
border-style: solid solid none solid;
border-color: #D76100;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu4 li a {
height: 32px;
voice-family: ""}"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #9E3C02;
display: block;
background: url(images/menu4.gif);
padding: 8px 0 0 30px;
}

#menu4 li a:hover {
color: #fff;
background: url(images/menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}

#menu4 li a:active {
color: #fff;
background: url(images/menu4.gif) 0 -64px;
padding: 8px 0 0 30px;
}

</style>
</head>

<body>
<div id="menu4">
<ul>
<li><a href="#1" title="Home">Home</a></li> // 'Home' където пише и на двете места трябва да е еднакво//
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a></li>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="#6" title="Downloads">Downloads</a></li>
</ul>
</div>
</body>
</html>

Демо можете да видите: тук

Menu Design 4

Сподели |

Коментари (13)

Petako1f на 14.11 2008 в 19:07ч.

Здравей !
Браво за менюто, обаче би ли ми обяснил какво имаш в предвид със следното :

voice-family: ""}"";

Благодаря !

ZoNTack на 15.12 2008 в 19:42ч.

Добър урок! Аз си мислех, че имаш грешки. Но всъщност проблема е бил в мен :)

sng на 11.01 2009 в 21:42ч.

Амии, ман нещо не ми се получава.. всичко пробвах и пак нестава... просто ми излиза един border, който огражда всички тези опции, но не излиза както на демото..

funai4eto на 18.01 2009 в 19:11ч.

Някои можели да ми помогне, искам да направя така че някои ако иска да се регестрира в сайта ми, да се регестрира ( както тук напримем трябва да се регесртираш и после да се логнеш за да пишеш коментарии или л.с. )

някой можели да напише урок регистрация в сайтове

МОЛЯ ЗА ПОМОЩ

Napster на 29.01 2009 в 11:39ч.

Моля кажете как да направя така че при натискане на някой от бутоните да отива на някоя страница. Пробвах да заменя #2 и другите със сайто но ми казва че в папката menu4 няма намерен такъв файл. Как да го оправя? Иначе урока е супер и менюто изглежда много добре.

Napster на 29.01 2009 в 12:41ч.

Как да сложа менюто на друго място (и да не е с маргин ако може)

Napster на 29.01 2009 в 13:40ч.

Как да сложа менюто на друго място (и да не е с маргин ако може)

ludata666 на 06.02 2009 в 11:19ч.

Предполагам, че проблемът ти sng е същият като при мен - работи само под интернет експлорер, а под мозила или друг браузер не става.
Ако някой има идея как може да се оправи това нека каже, много моля...
Благодаря на всички предварително!

Eskalibur на 13.03 2009 в 19:19ч.

Ами за тези които имат проблеми:
При записа на картинката трябва да я именувате menu4.gif защото като я сваляте си я записвате там с името "нещо_си_menu4.gif". Просто я преименувайте на "menu4.gif" или променете кода :) (по лесно е с промяна на името)

Tohi на 13.08 2009 в 19:30ч.

браво за менюто и благодаря на Petako1f за " voice-family: ""}""; " премахна го от скрипта и менюто ми се оправи.

blackeyedgirl на 18.03 2010 в 10:06ч.

абе хора въпреки че въпроса ми е малко тъп да ви питам как се прави папка ? :D

Zemoch на 05.12 2010 в 15:50ч.

то менюто хубаво ама така на готово цялото да се дава не е добре . аз искам да знам коя част какво прави и защо уж е урок а само копи пейст и тва е . обясни малко тая част прави еди какво си тая еди какво си . щом е урок значи трябва да ни научи как сами да си правим и да го променяме както ни трябва . а не само копирай копирай и накрая мн як сайт дето нищо не си направил сам ....

ceko98 на 28.04 2011 в 13:23ч.

Извинявайте но някой знае ли как се пренасочва когато натисна "submit" на моя сайт то нестава? Благодаря предварително!

Хубаво вертикално меню

Коментари (13)

Регистрирайте се, за да добавите коментар