шапка лого линия шапка
black-line
grey-line   grey-line   grey-line


grey-line   grey-line  
black-line
ДИСТАНЦИОННЫЕ КУРСЫ ВЕБ-ДИЗАЙНА
black-line
ПЕРВОЕ ЗАДАНИЕ
grey-line   grey-line   grey-line

Как сделать интерактивное меню на CSS?



grey-line   grey-line  
grey-line   grey-line   grey-line

Этот урок является продолжением "Темы 0001". Смотрите предыдущее занятие:   Смотреть

УРОК-0004.

grey-line   grey-line  
grey-line   grey-line   grey-line 1. ИНТЕРАКТИВНОЕ МЕНЮ НА CSS.

1.1. Мы будем делать интерактивное меню, как на картинке ниже.


grey-line   grey-line  
ПРИМЕР СТРАНИЦЫ
grey-line   grey-line   grey-line

1.2. Так будет выглядеть наше меню, как на картинке ниже.


grey-line   grey-line  
ПРИМЕР СТРАНИЦЫ
grey-line   grey-line   grey-line

1.3. Наша страница в данный момент выглядит так:


grey-line   grey-line  
НАША СТРАНИЦА
grey-line   grey-line   grey-line

1.4. Нам нужно будет вставить CSS-код интерактивного меню в разрыв между верхней таблицей с изображением и нижней таблицей с текстом:


grey-line   grey-line  
CSS-код в разрыв
grey-line   grey-line   grey-line

1.5. В HTML-коде этот "разрыв" находится здесь:


grey-line   grey-line  
РАЗРЫВ
grey-line   grey-line   grey-line

1.6. Ставим курсор, как показано на картинке:


grey-line   grey-line  
СТАВИМ КУРСОР
grey-line   grey-line   grey-line

1.7. Вставляем на место курсора следующий код:


grey-line   grey-line  
grey-line   grey-line   grey-line
<table align="center" bgcolor="#191414" width="960" cellspacing="0" cellpadding="0" border="0">
<tr>
    <td width="960">&nbsp;</td>
    </tr>
</table>



<table align="center" bgcolor="#191414" width="960" cellspacing="0" cellpadding="0" border="0">
<tr>
    <td width="960" align="center">
                    <ul class="css-menu-1">
<li><a href="nailstudia.html" target="_top">Главная</a></li>
<li><a href="nailstudia-uslugi.html" target="_top" class="selected">Виды услуг</a></li>
<li><a href="nailstudia-portfolio.html" target="_top">Портфолио</a></li>
<li><a href="master.html" target="_top">О мастере</a></li>
<li><a href="nail-price.html" target="_top"> Расценки</a></li>
<li><a href="nail-otzivi.html" target="_top">Отзывы</a></li>
<li><a href="nail-kontakti.html" target="_top">Контакты</a></li>
</ul>
 </td>  
    </tr>
</table>

grey-line   grey-line  
grey-line   grey-line   grey-line

1.8. В коде страницы это будет выглядеть следующим образом:


grey-line   grey-line  
КОД
grey-line   grey-line   grey-line

1.9. А в браузере это пока выглядит так:


grey-line   grey-line  
ТАК ВЫГЛЯДИТ ВВ БРАУЗЕРЕ
grey-line   grey-line   grey-line

1.10. Чтобы меню выглядело как в финальной картинке, нужно еще добавить css-код:


grey-line   grey-line  
grey-line   grey-line   grey-line
ul.css-menu-1 { list-style: none
}

ul.css-menu-1 li {
display: inline
}

ul.css-menu-1 li a {
font-family: Tahoma, Geneva, sans-serif; 
text-decoration: none;
background: #212121;
font-weight: bold;
color: #c9c9c9; 
padding: 6px 10px 6px 10px
}

ul.css-menu-1 li a:hover {
padding: 6px 10px 6px 10px;
font-weight: bold;
background: #313131;
color: #ff0033 
}

ul.css-menu-1 li a.selected {
background: #3c3c3c
}


grey-line   grey-line  
grey-line   grey-line   grey-line

1.11. Его мы вставим в блок

<style type="text/css"> 
вместо курсора:


grey-line   grey-line  
ВМЕСТО КУРСОРА
grey-line   grey-line   grey-line

1.12. И тогда наш

<style type="text/css"> 
будет выглядеть так:


grey-line   grey-line  
ТАК ВЫГЛЯДИТ КОД
grey-line   grey-line   grey-line

1.14. А наша страница будет выглядеть так:


grey-line   grey-line  
НАША СТРАНИЦА
grey-line   grey-line   grey-line

1.15. И обратите внимание, фрагмент кода в меню

class="selected"
отвечает за выделение одной из кнопок:


grey-line   grey-line  
ФРАГМЕНТ КОДА
grey-line   grey-line   grey-line

Так выглядит выделенная кнопка
(Таким образом мы показываем на какой именно странице мы находимся):

grey-line   grey-line  
ВЫДЕЛЕННАЯ КНОПКА
grey-line   grey-line   grey-line

А на этом наш урок закончен!
Если есть желание, переходите к следующему…




grey-line   grey-line  
black-line
КНОПКИ ОБРАТНОЙ СВЯЗИ КНОПКИ ОБРАТНОЙ СВЯЗИ
black-line
нижний блок
нижний блок Новые работы НАШИ ГРУППЫ ВКОНТАКТЕ:

Дизайн групп ВКонтакте

Разработка сайтов

Производство мультипликации

Поздравительные открытки

Инфографика


НАШ КАНАЛ НА ЮТУБ:

Смотреть>>
нижний блок НАШИ ТЕЛЕФОНЫ:
+7 (951) 375 92 45,
+7 (901) 452 63 27.


НАШ АДРЕС:
630120, г. Новосибирск, ул. Забалуева, 21.


E-MAIL:
knyazew2015@mail.ru, kindle888@rambler.ru

ICQ: 406472064
WhatsApp: 89513759245
Instagram: chudesnaya_strana_17


НАША КОМАНДА.

Подробнее>>
нижний блок
нижний блок
самый нижний блок Поделиться с друзьями:
самый нижний блок

Главная   |   Развлечения   |   Путешествия   |   Обучение   |   Дизайн


Сайт сделан в студии дизайна "Чудесная страна"


    Яндекс.Метрика Рейтинг@Mail.ru    



Valid HTML 4.0 Transitional


Правильный CSS!