Меню с Javascirpt част 1

Автор: Gonke

Добър ден днес попаднах на един сайт на английски в който пише как да си направим меню с Javascirpt ето крайния резултат:

Отворете нов документ Photoshop около 600 × 200 пиксела попълнете фона с цвят # ebebeb. Създавате правоъгълник, 600 × 94 пиксела в горната част на документа. ( кликнете инструмент „фиксиран размер“ в раздела стил) Използване на цветове #ececec и # FFFFFF добавите линеен градиент на вашия правоъгълник. След това добавете 1 пиксел бордер използвате цвят # c9c9c9.Трябва да получите нещо такова:

Под вашият 1 пиксел бордер добавете 1 пиксел бяла линия обхваща цялата ширина на долния таб. Под бяла си линия добавите друг правоъгълник, този път 62 пиксела във височина и 600 пиксела. Попълнете вашия правоъгълник с линеен градиент използване на цветове # EEEEEE & # f6f6f6.Както някой казват „да си направим бутоните лъскави“ така направете и вие и ще получите

(По желание) Сложете 1 px на бялата линия която направихте (изглежда по-добре 🙂 )

4.Запишете вашия образ и направете селекция около 2 пиксела и цялата височина на вашия документ след това отидете в „mage > crop“, запазете файла като bg.png в папка на вашия работен плот наречен изображения. Следваща създадете нова документ 2 пиксела широка и 62 пиксела във височина. Увеличаване след използване на цвят # f5f5f5 създаде 1 пиксел линия до долу в ляво. Направете същото и за правото, но използвайте цвят # dadada. Тогава най-горе просто създадете 1 пиксел бяла линия ще намира. Също така освен това в папката, изображения и името на файла divider.png . Трябва да се получи нещо такова:
5.Сега би трябвало да бъдат определени за създаване на HTML файл. Отворете Dreamweaver и да започнete нов HTML документ, освен документа веднага като index.html на вашия работен плот. Отвори Notepad и запишете файла като styles.css празно (празен). Също така освен това на вашия работен плот. Изтеглете най-новата JQuery библиотека от JQuery сайта, запишете файла в една папка, наречена „JS“. Отворете папката и преименуване на файла просто „jquery.js“. В кода оглед на Dreamweaver връзка стила си лист и JQuery файл.

<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>

6.Започнете с очертаване на основите на нашия HTML файл, файлът ще се състои на HTML съдържание DIV опаковка или контейнер, просто DIV заглавната част с една позиция маркер вътре и след това ни навигация.

<div id="content_wrap"><!--content wrap begins here-->

<div id="header">
<h1>JQuery Navigation Bar</h1>
</div>

<div id="navigation"><!--navigation starts here-->
<ul class="nav_links">
<li><a href="#">Page #1</a></li>
<li class="withdiv"><a href="#">Page #2</a></li>
<li class="withdiv"><a href="#">Page #3</a></li>
<li class="withdiv"><a href="#">Page #4</a></li>
<li class="withdiv"><a href="#">Page #5</a></li>
<li class="withdiv"><a href="#">Page #6</a></li>
<li class="withdiv"><a href="#">Page #7</a></li>
<li class="withdiv"><a href="#">Page #8</a></li>
</ul>
</div><!--navigation ends here-->

</div><!--content wrap ends here-->

7.Нека ви обясня за навигация код по-горе, това е нормална навигация, с изключение на първия бутон, който няма клас. В клас „withdiv“ основно средство с разделител. Зададете разделител за всяка връзка, че тя поставя нашата малка снимка дели на ляво от бутоните. Но ние не искаме един делител в началото или в края на навигация. Така че всяка връзка с клас „withdiv“ ще има нашата малка снимка делител добавя към него.
8.Сега идва ред на .css файла който създадохте по рано,отворете го и поставете кода вътре.

*{
padding:0;
margin:0;
}

body {
background-image: url(images/bg.png);
background-repeat: repeat-x;
background-color: #ebebeb;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #5f5f5f;
}

#content_wrap {
margin: auto;
width: 850px;
margin-top: 0;
margin-right: auto;
margin-left: auto;
}

Обърнете внимание на размера на нашата заглавна DIV, си на същата височина като нашата 1-ви правоъгълник, в която сме създали в Photoshop. Сега за навигация стилове.

h1 {
color: #FF0000;
text-align: center;
margin-top: 25px;
}

#header {
float: left;
height: 94px;
width: 850px;
}

Доста неща право напред, на content_wrap е нашият съд, това просто ще центъра нашата малка уебсайт. Следващият код ще бъде за бърз и лесен нашата заглавна ние просто искам основно кутия с някакъв текст в него, това също ще postioning помощ за навигация.

float: left;
height: 62px;
width: 850px;
}

.nav_links ul {
margin: 0px;
padding: 0px;
}

.nav_links li {
list-style:none;
display:block;
font-size: 14px;
float: left;
}

.nav_links a {
text-decoration: none;
color: #990000;
display: block;
height: 40px;
padding-top: 22px;
padding-right: 27px;
padding-left: 26px;
}

.nav_links a:hover {
color: #FFFFFF;
background-image: url(images/hover.png);
background-repeat: no-repeat;
}

.withdiv {
background-image: url(images/divider.png);
background-repeat: no-repeat;
}

Ще продължим в част 2 🙂
Превод: www.tutorialized.com