Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/7: Рейтинг темы: голосов - 7, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 30.03.2015
Сообщений: 2
1

Навигационное меню на Bootstrap

10.04.2015, 21:00. Просмотров 1405. Ответов 1
Метки нет (Все метки)

Пожалуйста, подскажите как сделать такое меню такое, как на этом сайте http://kursy-mo.ru ???
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
10.04.2015, 21:00
Ответы с готовыми решениями:

Навигационное меню заходит на секцию, Bootstrap
Добрый день всем и за ранее благодарен, тому кто откликнется Почему навигационное меню для...

навигационное меню
нужно создать двух уровневое навигационное меню как это сделать? оно должно быть таким как показано...

Навигационное меню
Проблема состоит в следующем. Как сделать навигационное меню - выпадающий список в HTML? То есть...

Навигационное меню гуляет(
Подскажите что и где прописать:cry: Не далек я в этом, активное навигационное меню которое ползает...

1
Эксперт HTML/CSS
647 / 551 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
11.04.2015, 08:58 2
Лучший ответ Сообщение было отмечено anntoha как решение

Решение

1. При чем тут Bootstrap?
2. Это далекоооооо не самый хороший пример меню...
3. Если уж так хочется, то всегда можно посмотреть код(в любом адекватном браузере есть просмотр кода)
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="menu_layout">
    <div id="menu">
        <a href="/" class="menu1"><span>О школе<br>дополнительного<br>образования</span></a>
        <a href="beauty.html" class="menu2"><span>Обучение в сфере<br>индустрии красоты,<br>мастер-курсы</span></a>
        <div><img src="pics/pic2.jpg"></div>
        <a href="spirit.html" class="menu3"><span>Психологические<br>тренинги, развитие<br>личности</span></a>
        <div><img src="pics/pic4.jpg"></div>
        <a href="design.html" class="menu4"><span>Обучение в сфере<br>дизайна</span></a>
        <div><img src="pics/pic1.jpg"></div>
        <a href="business.html" class="menu5"><span>Обучение в деловой<br>сфере</span></a>
        <div><img src="pics/pic3.jpg"></div>
        <a href="hobby.html" class="menu6"><span>Хобби-курсы</span></a>
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#menu_layout {height:300px; background:#c6dae6 url(bg_menu.jpg) center bottom repeat-x; overflow:visible}
#menu {width:960px; margin:0px auto; overflow:visible; height:300px;}
#menu a {display:block; width:192px; height:150px; float:left;  overflow:visible; text-decoration:none; color:#fff; font-size:16px; line-height:120%;}
#menu a span {display:block; width:192px;}
#menu a:hover span {width:192px; margin:-15px 0px 0px -15px; transition: ease 0.4s;}
#menu div {width:192px; height:150px; float:left;}
#menu img {margin:0px; vertical-align:bottom}
 
.menu1 span {background:#2d87d1 url(icon1.png) center 11px no-repeat; height:80px; padding:70px 0px 0px 0px;}
.menu1:hover span {border:15px solid #2d87d1; position:relative;}
.menu2 span {background:#29a5f3 url(icon3.png) center 11px no-repeat; height:80px; padding:70px 0px 0px 0px;}
.menu2:hover span {border:15px solid #29a5f3; position:relative;}
.menu3 span {background:#2bc6ee url(icon5.png) center 11px no-repeat; height:80px; padding:70px 0px 0px 0px;}
.menu3:hover span {border:15px solid #2bc6ee; position:relative;}
.menu4 span {background:#3ecbff url(icon2.png) center 21px no-repeat; height:70px; padding:80px 0px 0px 0px;}
.menu4:hover span {border:15px solid #3ecbff; position:relative;}
.menu5 span {background:#0a7fe2 url(icon4.png) center 21px no-repeat; height:70px; padding:80px 0px 0px 0px;}
.menu5:hover span {border:15px solid #0a7fe2; position:relative;}
.menu6 span {background:#53b5ff url(icon6.png) center 21px no-repeat; height:70px; padding:80px 0px 0px 0px;}
.menu6:hover span {border:15px solid #53b5ff; position:relative;}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.04.2015, 08:58

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Сделать навигационное меню
Привет. Помогите сделать горизонтальное навигационное меню, в верху страницы, чтобы немного...

Как построить навигационное меню
Как построить таблицу? Не могу выровнять пл центру текст. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt;...

Горизонтальный список (навигационное меню)
Правильно ли я делаю, если мне нужно горизонтальное навигационное меню, чтобы каждя ссылка была в...

навигационное меню в одном css-файле
Можно ли как-то прописать меню навигации в общем css-файле, отвечающем за структуру и дизайн сайта?...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.