Направите ЦСС мени који пада из главног
Већина људи који имају рачунаре, увек покушавају да се повежу са Интернетом. После тога, свако може да посети различите сајтове као корисник. То може бити тражење информација, забава, тренинг, игре, ћаскање на форумима и друго.
Приступом страници сајта корисник види његов садржај. То је као садржај књиге коју ћете прочитати. Садржај се састоји од различитих скупова линкова који преносе корисника на друге странице ресурса или чак на друге странице. Такви линкови корисницима помажу при навигацији преко Интернета. Везе су груписане у одвојене блокове који представљају мени менија.
Функционалност било ког ресурса у великој мери зависи од тога који мени се користи на њему. Изборник локације може имати другачији дизајн, имати хоризонталну или вертикалну оријентацију, смјештен на дну, горе или са стране, бити скривен, отворен, спуштен, растављен.
Хоризонтални ЦСС падајући мени
Хоризонтални падајући мени се користи за организовање навигације. структура сајта. Не треба да злоупотребљавате број нивоа за улагање, не би требало да буде више од два. Са више нивоа корисника биће много теже наћи потребне информације. Затим детаљније разматрамо метод креирања менија.
Замислите ЦСС мени који пада из главног хоризонталног блока. Хајде да компликујемо задатак и направимо ЦСС падајући мени када лебдите. Мора постојати нека врста хоризонталног блока са линковима који представљају ставке менија. Након што мишем пређете преко ових тачака, отварају се додатне тачке навигације.
Да бисте направили ЦСС падајући мени, требаће вам:
- ХТМЛ филе;
- ЦСС фајл;
- имаге фор бацкгроунд.
Слика за позадину је помоћни елемент који побољшава дизајн и чини мени елегантним.
Направите хтмл датотеку
Странице било ког сајта могу бити статичне или динамичне. Статичка страница сајта када се гледа у претраживачу приказује се у облику у којем је изворно креирана. Динамична страница се креира када се отвори у прегледачу са засебних страница плуг-ина и додатним излазом информација из базе података. Али у сваком случају, ако отворите страницу са изворним кодом преко претраживача, ХТМЛ страница хипертекстуалног означавања ће бити приказана. Да бисте креирали мени, морате развити ХТМЛ страницу и сачувати је у ХТМЛ датотеци. Направите ц-мени који на овај начин испада из главног. ХТМЛ странице се могу креирати у било којем уређивачу текста, али је боље користити специјализиране: Нотепад ++ или Адобе Дремвеавер ЦСС. Отворите празну страницу у едитору, унесите неопходни код и сачувајте га под именом мииндек.хтмл. Коментари се могу додати директно у код, између посебних ознака. који се користе у ХТМЛ-у за ову сврху.
Распоред странице при креирању падајућег хоризонталног ЦСС менија ће се разликовати од уобичајеног стандардног менија, будући да су потребне ставке листе
- или
- .
ХТМЛ цоде
Треба напоменути да се у ХТМЛ-у све конструкције између <> заграда називају тагови. Ознаке могу бити једноструке и пар. Ознака пара мора садржати два пара заграда <>, ау другом пару структура почиње са косом цртом /. У упареној ознаци, прва ознака је прва, а друга завршна.
Креирај код:
Тако можете креирати бесконачан број ставки и под-менија. На самом крају затворите све упарене ознаке.
Креирање ЦСС датотеке
Датотека је повезана са ХТМЛ датотеком. стилес стиле.цсс потребно је не само за исправно позиционирање менија на веб страници, већ и за давање лијепог изгледа изборнику, креирање јединственог дизајна веб странице. ЦСС датотека се креира у истом едитору као и ХТМЛ датотека, али за разлику од ХТМЛ странице, корисник ће видјети само резултат стилске датотеке на страници која се гледа. Поред тога, приликом додавања коментара на ЦСС, користи се / * Цоммент ... * / цонструцт.
ЦСС код
Креирај код:
/ * ЦСС падајући мени * /
боди {/ * Стил за тело странице * /
позадина: # 0814да; / * Боја позадине * /
маргин: 0; / * Спољна подлога * /
паддинг: 0; / * Унутрашња подлога * /
фамилиа фонтов: "Требуцхет МС", Ариал, Хелветица, санс-сериф; / * Породица фонта * /
}
.пример {/ * целог блока менија * /
позиција: релативна; / * Позиционирање у односу на порекло * /
бацкгроунд: # ебецф7 урл (../ имагес / ванбацкгроунд.јпг); / * Позадина са сликом за цео мени * /
видтх: 525пк; / * Ширина целог блока менија * /
хеигхт: 384пк; / * Висина целог блока менија * /
бордер: 1пк # 000 солид; / * Дебљина и стил обруба цијелог блока изборника * /
маргин: 21пк ауто;
паддинг: 16пк;
}
/ * стилови за мени * /
.навигатор, .навигатор ул {/ * Блоцк стиле витх уннумберед лист * /
лист-стиле: нема; / * Поништавање маркера за листу * /
маргин: 0;
паддинг: 0;
}
.навигатор {/ * Стил блокирања навигације * /
позиција: релативна;
}
.навигатор ул {/ * Уннумберед Лист Стиле * /
хеигхт: 0; / * Висина * /
лево: 0; / * Лево * /
оверфлов: хидден; / * Део блока је скривен ако се не уклапа у предвиђени простор * /
позиција: апсолутна; / * Ми радимо апсолутно позиционирање * /
врх: 47пк; / * Изнад * /
}
.навигатор ли {/ * Стиле оф уннумберед итемс * /
флоат: лефт; / * Обмотавање са леве стране * /
позиција: релативна;
}
.навигатор ли а {/ * стил унлистед лист лист * /
бацкгроунд-цолор: # 7ц75б7; / * Боја позадине * /
бордер: 1пк солид # 7ц75б7;
цолор: #фбфбфф;
дисплаи: блоцк; / * Прикажи по блоку. * / Т
фонт-сизе: 15пк; / * Подесите величину фонта * /
лине-хеигхт: 34пк; / * Размак између редова * /
паддинг: 6пк 21пк;
тект-децоратион: ноне; / * Текст без дизајна * /
транзиција: 0,6с;
}
.навигатор ли: ховер> а {/ * Стил ставки у ненумерисаној листи када лебди * /
бацкгроунд: # 8фцб38;
бордер-цолор: # 7ц75б7;
цолор: #фбфбфф;
}
.навигатор ли: ховер ул.випадное {/ * Ховер стил падајућег менија * /
хеигхт: ауто;
ширина: 181пк;
}
.навигатор ул ли {/ * Листа и ставке стила * /
-моз-транзиција: 0.7с;
}
.навигатор ли ул ли {/ * Стиле итем-лист-итем * /
-моз-транситион-делаи: 1с;
}
.навигатор ли: ховер ул ли {/ * Моусе ховер стиле * /
}
.навигатор ул ли {/ * Листа стилова-итем-линк * /
позадина: # 7ц75б7;
бордер-цолор: # 7ц75б7;
цолор: #фбфбфф;
лине-хеигхт: 2пк;
-моз-транзиција: 1.7с;
-о-транзиција: 1.7с;
-вебкит-транситион: 1.7с;
транзиција: 1.7с;
}
.навигатор ли: ховер ул ли а {/ * Ставка-лист-ставка-ставке лебдећег стила * /
лине-хеигхт: 36пк;
}
.навигатор ул ли а: ховер {/ * Листа стилова-ставка плус линк за прелазак * /
бацкгроунд: # 8фцб39;
бацкгроунд-имаге: ргба (41,137,216,0.5);}
Након креирања датотека мииндек.хтмл и стиле.цсс, потребно их је смјестити у засебни директориј. Ради лакшег рада, у фасцикли „Моји документи“ креирамо посебну демо фасциклу, ау њој ЦСС фасциклу, у коју стављамо фајл стиле.цсс, и фасциклу са сликама, где стављамо позадинску слику наведену у датотеци стила. За датотеку мииндек.хтмл не креирамо други засебни фолдер и стављамо га у демо мапу која је изворно креирана. Сада, отварањем датотеке мииндек.хтмл у прегледачу, можете видети хоризонтални ЦСС мени који се појављује када лебдите. То је све.
На исти начин, креира се вертикални падајући мени на ЦСС-у, али само за њега биће потребно развити нешто другачији стилски фајл.