Страница 1 из 11
Форум про uCoz » Всё для web-мастера » Уроки Веб-мастера » Урок №1. Создание меню
Урок №1. Создание меню
๖ۣۜInspire
Дата: Пятница, 19.04.2013, 17:04 | Сообщение # 1
Администраторы
Сообщений:598
Награды: 2




Всем привет, это первый урок по созданию сайта. В этом уроке мы будем делать простое меню горизонтальное фиксированное меню с выпадающими списками, прибитое к верхнему, левому и правому краю.

Начнём!
1) Сначала нужно написать структуру меню:

Код
<div class="menu">
<a href="#"><div class="li">BUTTON</div></a>
<a href="#"><div class="li">BUTTON</div></a>
<a href="#"><div class="li">BUTTON</div></a>
<a href="#"><div class="li">BUTTONDROP
<div class="drop"><div class="dropli">DROPLIBUTTON</div><div class="dropli">DROPLI</div><div class="dropli">DROPLI</div><div class="dropli">DROPLI</div></div>
</div></a>
<a href="#"><div class="li">BUTTON</div></a>
</div>


Классом "menu" обозначим само меню, "li" - пункты внутри меню, "drop" - выпадающий список, ну а классом "dropli" пункты внутри самого выпадающего списка.

2)Напишем стили для класса "menu":

Код
.menu{
position:fixed; // фиксация меню, "absolute" - не будет фиксировано
left:0;
right:0;
top:0;
background:#ddd; // фон меню
box-shadow:0 0 8px #a0a0a0; // тень от меню
-moz-box-shadow:0 0 8px #a0a0a0; // тень от меню
-o-shadow:0 0 8px #a0a0a0; // тень от меню
-webkit-box-shadow:0 0 8px #a0a0a0 ;// тень от меню
}


3)Пропишем стили для пунктов меню, т.е для "li":

Код
.li{
display:inline-block;   
color:#404040; // цвет шрифта
font-family:calibri;
font-size:10pt; // размер шрифта
padding:10px 20px 10px 20px;
border-right:1px solid #ccc; // правая граница
}
.li:hover{ //при наведении
cursor:pointer;
background:#e1e1e1; // фон
}   
.menu a{
text-decoration:none;
}
.menu a:hover{
text-decoration:none;
}


4)Стили для выпадающего списка:

Код
.drop{
opacity:0;
display:none;
position:absolute;
border:1px solid #ddd;//границы
background:#dfdfdf;//фон
z-index:1;
box-shadow:0 1px 6px #a0a0a0;
-webkit-box-shadow:0 1px 6px #a0a0a0;
-moz-box-shadow:0 1px 6px #a0a0a0;
-o-box-shadow:0 1px 6px #a0a0a0;
border-radius:3px;
margin-top:19px;
margin-left: -20px;
}


И для его пунктов:

Код
.dropli{
padding:5px;
width:150px;
color:#404040;//цвет шрифта
font-family:calibri;//тип шрифта
font-size:10pt;//размер шрифта
border-top:1px solid #d0d0d0;
}
.dropli:hover{ // наведение на пункт
cursor:pointer;
background:#e3e3e3;
}


5)Создадим анимацию для "drop":

Код
.li:hover .drop{ // при наведении на пункт меню в котором находится "drop" сделать его видимым
display:block;
opacity:1;
      -webkit-animation-name: 'movement';
      -webkit-animation-duration: 0.2s;
      -webkit-animation-timing-function: easy-out;
-webkit-animation-direction:alternate;
      -moz-animation-name: 'movement';
      -moz-animation-duration: 0.2s;
      -moz-animation-timing-function: easy-out;
-moz-animation-direction:alternate;
      -o-animation-name: 'movement';
      -o-animation-duration: 0.2s;
      -o-animation-timing-function: easy-out;
-o-animation-direction:alternate;
      animation-name: 'movement';
      animation-duration: 0.2s;
      animation-timing-function: easy-out;
animation-direction:alternate;
}


А вот и сама анимация:

Код
@-webkit-keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}
@-o-keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}
@-moz-keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}
@keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}


Почти готово! Осталось сделать небольшие штрихи.

В самый первый пункт "dropli" приписываем style="border-top:none;" чтобы не было двойной линии.

Добавляем уголок к "drop"

Код
.ugol{
width: 0;
height: 0;
border-left: 6px solid transparent;
border-bottom: 6px solid #dfdfdf;
border-right: 6px solid transparent;
margin-top: -6px;
margin-left: 25px;
}
, и прописываем
сразу после


И последнее, нужно добавить небольшую прозрачную полоску чтобы "drop" раньше времени не исчезал:

(нужно вставить перед
)

Код
.drophover{
display:none;
width:150px;
height:10px;
position:absolute;
margin-top:10px;
margin-left: -20px;
}
.li:hover .drophover{
display:block;
}


Готово!

Вот так у вас должно получится - демо

Вот весь код:

Код
<style>
.li:hover .drop{
display:block;
opacity:1;
      -webkit-animation-name: 'movement';
      -webkit-animation-duration: 0.2s;
      -webkit-animation-timing-function: easy-out;
-webkit-animation-direction:alternate;
      -moz-animation-name: 'movement';
      -moz-animation-duration: 0.2s;
      -moz-animation-timing-function: easy-out;
-moz-animation-direction:alternate;
      -o-animation-name: 'movement';
      -o-animation-duration: 0.2s;
      -o-animation-timing-function: easy-out;
-o-animation-direction:alternate;
      animation-name: 'movement';
      animation-duration: 0.2s;
      animation-timing-function: easy-out;
animation-direction:alternate;
}
.ugol{
width: 0;
height: 0;
border-left: 6px solid transparent;
border-bottom: 6px solid #dfdfdf;
border-right: 6px solid transparent;
margin-top: -6px;
margin-left: 25px;
}
.li:hover .drophover{
display:block;
}
body{
background:#ccc;
}
.drop{
opacity:0;
display:none;
position:absolute;
border:1px solid #ddd;
background:#dfdfdf;
z-index:1;
box-shadow:0 1px 6px #a0a0a0;
border-radius:3px;
margin-top:19px;
margin-left: -20px;
}
.dropli:hover{
cursor:pointer;
background:#e3e3e3;
}
.li:hover{//наведение
cursor:pointer;
background:#e1e1e1;
}
.dropli{
padding:5px;
width:150px;
color:#404040;
font-family:calibri;
font-size:10pt;
border-top:1px solid #d0d0d0;
}
.menu{
position:absolute;
z-index:2;
left:0;
right:0;
top:0;
background:#ddd;
box-shadow:0 0 8px #a0a0a0;
}
.drophover{
display:none;
width:150px;
height:10px;
position:absolute;
margin-top:10px;
margin-left: -20px;
}
.li{
display:inline-block;
color:#404040;
font-family:calibri;
font-size:10pt;
padding:10px 20px 10px 20px;
border-right:1px solid #ccc;
}
@-webkit-keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}
@-o-keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}
@-moz-keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}
@keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}
.menu a{
text-decoration:none;
}
.menu a:hover{
text-decoration:none;
}
</style>
<div class="menu"><a href="#"><div class="li">BUTTON</div></a><a href="#"><div class="li">BUTTON</div></a><div class="li">BUTTON</div><div class="li">BUTTONDROP<div class="drophover"></div><div class="drop"><div class="ugol"></div><div class="dropli" style="border-top:none;">DROPLIBUTTON</div><div class="dropli">DROPLI</div><div class="dropli">DROPLI</div><div class="dropli">DROPLI</div></div></div><div class="li">BUTTON</div></div>
Прикрепления: 6420641.jpg(62Kb)




Моё портфолио
Kosten
Дата: Пятница, 19.04.2013, 17:38 | Сообщение # 2
Администраторы
Сообщений:12675
Награды: 39


Supermenыч, отличный урок!

Kosten
Дата: Суббота, 20.04.2013, 09:54 | Сообщение # 3
Администраторы
Сообщений:12675
Награды: 39


Supermenыч, если есть меню готовое залей!

Капитан
Дата: Суббота, 20.04.2013, 12:09 | Сообщение # 4
Проверенные
Сообщений:291
Награды: 3


Supermenыч, очень популярно и подробно все разъяснил. Спасибо!
ProGamer
Дата: Воскресенье, 21.04.2013, 00:59 | Сообщение # 5
Пользователи
Сообщений:19
Награды: 0


ммм интересно,спасибо за урок
RiPeR
Дата: Понедельник, 16.09.2013, 13:06 | Сообщение # 6
Vip
Сообщений:528
Награды: 1


Спасибо за урок, потренируюсь)

Отличный сайт)
SaW
Дата: Понедельник, 16.09.2013, 16:56 | Сообщение # 7
Проверенные
Сообщений:130
Награды: 0


Ужас, как в этом можно разбираться, biggrin , куча символов.
๖ۣۜInspire
Дата: Понедельник, 16.09.2013, 19:59 | Сообщение # 8
Администраторы
Сообщений:598
Награды: 2


это легко



Моё портфолио
RiPeR
Дата: Вторник, 17.09.2013, 16:12 | Сообщение # 9
Vip
Сообщений:528
Награды: 1


Цитата (Supermenыч)
это легко

Для тебя легко, а для начинающего будет сложновато)


Отличный сайт)
CS-MASTER
Дата: Пятница, 13.12.2013, 23:21 | Сообщение # 10
Пользователи
Сообщений:150
Награды: 0


Цитата RiPeR ()
Для тебя легко, а для начинающего будет сложновато)

не ну пункт первый ещо понятно а далее закрыл глаза ) biggrin
Kosten
Дата: Пятница, 13.12.2013, 23:38 | Сообщение # 11
Администраторы
Сообщений:12675
Награды: 39


CS-MASTER, я вообще только стили признал biggrin

CS-MASTER
Дата: Суббота, 14.12.2013, 00:33 | Сообщение # 12
Пользователи
Сообщений:150
Награды: 0


Kosten, ) каждому свое )
Гость
Дата: Четверг, 28.08.2014, 12:33 | Сообщение # 13
Гости
Сообщений:
Награды:







Привет. Я совсем новичок в этом, не совсем все понял, но постараюсь все же разобраться. Просто подскажите, на создание примерно вот такого сайта http://dreamline.com.ru/ сколько у меня времени уйдет? или проще обратиться к знатокам. если да, то может знает кто в какуюцену это выйдет? rolleyes
Kosten
Дата: Четверг, 28.08.2014, 12:50 | Сообщение # 14
Администраторы
Сообщений:12675
Награды: 39


Гость.. там же написано.. дизайн и верска сайта делала студия. Вам придется с начало макет нарисовать и произвести верстку и все примерно выйдет 7-8 тыс. Если обращаться к частному лицу.. студия делает дороже но качественней.. так как несет ответственность.

Форум про uCoz » Всё для web-мастера » Уроки Веб-мастера » Урок №1. Создание меню
Страница 1 из 11
Поиск: