• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Урок №1. Создание меню (Как самостоятельно выстроить навигацию для сайта?)
Урок №1. Создание меню
๖ۣۜInspire
Пятница, 19 Апреля 2013 | Сообщение 1
Оффлайн
Vip
Сообщений:598
Награды: 3


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

Начнём!
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 (61.9 Kb)




Моё портфолио
Страна: (RU)
Kosten
Пятница, 19 Апреля 2013 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Supermenыч, отличный урок!
Страна: (RU)
Kosten
Суббота, 20 Апреля 2013 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Supermenыч, если есть меню готовое залей!
Страна: (RU)
Капитан
Суббота, 20 Апреля 2013 | Сообщение 4
Оффлайн
Проверенные
Сообщений:291
Награды: 3
Supermenыч, очень популярно и подробно все разъяснил. Спасибо!
Страна: (RU)
ProGamer
Воскресенье, 21 Апреля 2013 | Сообщение 5
Оффлайн
Пользователи
Сообщений:19
Награды: 0
ммм интересно,спасибо за урок
Страна: (RU)
RiPeR
Понедельник, 16 Сентября 2013 | Сообщение 6
Оффлайн
Vip
Сообщений:523
Награды: 1
Спасибо за урок, потренируюсь)

Отличный сайт)
Страна: (RU)
SaW
Понедельник, 16 Сентября 2013 | Сообщение 7
Оффлайн
Проверенные
Сообщений:160
Награды: 0
Ужас, как в этом можно разбираться, biggrin , куча символов.
Страна: (RU)
๖ۣۜInspire
Понедельник, 16 Сентября 2013 | Сообщение 8
Оффлайн
Vip
Сообщений:598
Награды: 3
это легко



Моё портфолио
Страна: (RU)
RiPeR
Вторник, 17 Сентября 2013 | Сообщение 9
Оффлайн
Vip
Сообщений:523
Награды: 1
Цитата (Supermenыч)
это легко

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


Отличный сайт)
Страна: (RU)
CS-MASTER
Пятница, 13 Декабря 2013 | Сообщение 10
Оффлайн
Пользователи
Сообщений:150
Награды: 0
Цитата RiPeR ()
Для тебя легко, а для начинающего будет сложновато)

не ну пункт первый ещо понятно а далее закрыл глаза ) biggrin
Страна: (KZ)
Kosten
Пятница, 13 Декабря 2013 | Сообщение 11
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
CS-MASTER, я вообще только стили признал biggrin
Страна: (RU)
CS-MASTER
Суббота, 14 Декабря 2013 | Сообщение 12
Оффлайн
Пользователи
Сообщений:150
Награды: 0
Kosten, ) каждому свое )
Страна: (KZ)
Гость
Четверг, 28 Августа 2014 | Сообщение 13
Гости
Сообщений:
Награды:
Привет. Я совсем новичок в этом, не совсем все понял, но постараюсь все же разобраться. Просто подскажите, на создание примерно вот такого сайта http://dreamline.com.ru/ сколько у меня времени уйдет? или проще обратиться к знатокам. если да, то может знает кто в какуюцену это выйдет? rolleyes
Страна: (RU)
Kosten
Четверг, 28 Августа 2014 | Сообщение 14
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Гость.. там же написано.. дизайн и верска сайта делала студия. Вам придется с начало макет нарисовать и произвести верстку и все примерно выйдет 7-8 тыс. Если обращаться к частному лицу.. студия делает дороже но качественней.. так как несет ответственность.
Страна: (RU)
kiza611
Вторник, 19 Марта 2019 | Сообщение 15
Оффлайн
Заблокированные
Сообщений:4
Награды: 0
спасибо за подробную инструкцию! 09a
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Урок №1. Создание меню (Как самостоятельно выстроить навигацию для сайта?)
  • Страница 1 из 1
  • 1
Поиск: