X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Сделать выдвижное меню CSS
Wolfak
Wolfak
Topic Starter сообщение 22.9.2011, 22:15; Ответить: Wolfak
Сообщение #1


JS, PHP, C#, Java
*****

Группа: Active User
Сообщений: 882
Регистрация: 5.6.2009
Из: Barcelona
Поблагодарили: 172 раза
Репутация:   80  


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

Вот само меню:
<div class="topmenu">
<ul id="el_mainmenu" class="thmenu">
<li><a href="/" title="Главная"><b>Главная</b></a></li>
<li><a href="/index.php?do=feedback" title="Заявка на обучение вождению"><b>Заявка на обучение</b></a></li>
<li><a href="/info.html" title="Полезная информация"><b>Полезная информация</b></a></li>
<li><a href="/new-pdd.html" title="Правила дорожного движения"><b>ПДД</b></a></li>
<li><a href="/main/12-ekzamen-v-gibdd.html" title="Экзамен в ГИБДД"><b>Экзамен в ГИБДД</b></a></li>
<li><a href="/marshgbdd.html" title="Маршруты ГИБДД"><b>Маршруты ГИБДД</b></a></li>
<li><a href="/main/9-otzyvy.html" title="Отзывы клиентов"><b>Отзывы</b></a></li>

</ul>


/*topmenu*/

.topmenu { padding-right: 15px; height: 56px; background: #2f537d url("../images/topmenu.jpg") no-repeat; overflow: hidden; }
.topmenu ul { display: inline; letter-spacing: -0.02em; }
.topmenu ul li, .topmenu ul li a, .topmenu ul li a b { float: left; }
  .topmenu ul li a { color: #b0c2d7; line-height: 55px; height: 56px; font-size: 17px; }
  .topmenu ul li a b { cursor: pointer; background: url("../images/topmenulink.png") no-repeat 100% 0; padding: 0 13px 0 11px; }
  .topmenu ul li a:hover { color: #fff; background: url("../images/topmenulink.png") repeat-x 100% 100%; }
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nicolasik
Nicolasik
сообщение 22.9.2011, 23:21; Ответить: Nicolasik
Сообщение #2


клоновод
**

Группа: Banned
Сообщений: 62
Регистрация: 10.8.2010
Поблагодарили: 1 раз
Репутация:   -2  


Сделаю за 20 ВМЗ. ася 411874972


--------------------
ЗАБАНЕН ЗА КЛОНОВОДСТВО
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Wolfak
Wolfak
Topic Starter сообщение 23.9.2011, 19:04; Ответить: Wolfak
Сообщение #3


JS, PHP, C#, Java
*****

Группа: Active User
Сообщений: 882
Регистрация: 5.6.2009
Из: Barcelona
Поблагодарили: 172 раза
Репутация:   80  


Проблема еще не решена.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dan1
dan1
сообщение 23.9.2011, 23:26; Ответить: dan1
Сообщение #4


Участник
***

Группа: User
Сообщений: 195
Регистрация: 12.8.2010
Из: Тагила
Поблагодарили: 74 раза
Репутация:   25  


Попробуйте дописать в css следующий код, измените цвет, позиционирование.. Может и получится smile.gif
.topmenu ul#el_mainmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
}
.topmenu ul#el_mainmenu ul {
margin: 40px 0 0 0;
border: 0 none;
list-style: none;
display: none;
position: absolute;
top: 25px;
left: 0;
}

.topmenu ul#el_mainmenu ul:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

.topmenu ul#el_mainmenu ul li {
width: 150px;
float: left;
display: block !important;
display: inline;
background: #E7F1F8;
margin: 0 0 -10px -10px;
}

.topmenu ul#el_mainmenu ul li a {
display:block;
padding-left: 10px;
}

/* Выпадающее меню */
.topmenu ul#el_mainmenu li:hover li a,
.topmenu ul li.iehover li a {
        float: none;
}


.topmenu ul#el_mainmenu li:hover li a:hover,
.topmenu ul#el_mainmenu li:hover li:hover a,
.topmenu ul#el_mainmenu li.iehover li a:hover,
.topmenu ul#el_mainmenu li.iehover li.iehover a {
color:#003366;
background: #D9EBF7;
}

.topmenu ul#el_mainmenu ul {
display: none;
position: absolute;
top: 0;
}

.topmenu ul#el_mainmenu li:hover ul ul,
.topmenu ul#el_mainmenu li.iehover ul ul {
        display: none;
}

.topmenu ul#el_mainmenu li:hover ul,
.topmenu ul#el_mainmenu ul li:hover ul,
.topmenu ul#el_mainmenu li.iehover ul,
.topmenu ul#el_mainmenu ul li.iehover ul {
        display: block;
}

Как выводить меню:
<div class="topmenu">
<ul id="el_mainmenu" class="thmenu">
<li><a href="/" title="Главная"><b>Главная</b></a>
    <ul>
    <li><a href="#">Номер 1</a></li>
    <li><a href="#">Номер 2</a></li>
    </ul>
</li>
<li><a href="/index.php?do=feedback" title="Заявка на обучение вождению"><b>Заявка на обучение</b></a></li>
<li><a href="/info.html" title="Полезная информация"><b>Полезная информация</b></a></li>
<li><a href="/new-pdd.html" title="Правила дорожного движения"><b>ПДД</b></a></li>
<li><a href="/main/12-ekzamen-v-gibdd.html" title="Экзамен в ГИБДД"><b>Экзамен в ГИБДД</b></a></li>
<li><a href="/marshgbdd.html" title="Маршруты ГИБДД"><b>Маршруты ГИБДД</b></a></li>
<li><a href="/main/9-otzyvy.html" title="Отзывы клиентов"><b>Отзывы</b></a></li>
</ul>


Сразу говорю, что сразу всё идеально не заработает — придётся покопаться.

Сообщение отредактировал dan1 - 23.9.2011, 23:29
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Wolfak
Wolfak
Topic Starter сообщение 24.9.2011, 16:08; Ответить: Wolfak
Сообщение #5


JS, PHP, C#, Java
*****

Группа: Active User
Сообщений: 882
Регистрация: 5.6.2009
Из: Barcelona
Поблагодарили: 172 раза
Репутация:   80  


dan1, сами выпадающие ссылки отображаются некорректно. Ссылку на сайт отправил в лс.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dan1
dan1
сообщение 24.9.2011, 18:16; Ответить: dan1
Сообщение #6


Участник
***

Группа: User
Сообщений: 195
Регистрация: 12.8.2010
Из: Тагила
Поблагодарили: 74 раза
Репутация:   25  


Посмотрел, что получается..
У вас написано следующее:
.topmenu { padding-right: 15px; height: 56px; background: #2f537d url("../images/topmenu.jpg") no-repeat; overflow: hidden; }

Уберите, пожалуйста, overflow:hidden..
С цветами и размерами, я надеюсь, Вы сами разберетесь.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Wolfak
Wolfak
Topic Starter сообщение 24.9.2011, 20:17; Ответить: Wolfak
Сообщение #7


JS, PHP, C#, Java
*****

Группа: Active User
Сообщений: 882
Регистрация: 5.6.2009
Из: Barcelona
Поблагодарили: 172 раза
Репутация:   80  


dan1, Спасибо большое =)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Маленький кейс как сделать много почтовых ящиков в Gmail
Один аккаунт = много ящиков
1 PostBrigada 509 Вчера, 21:34
автор: Pingunio
Открытая тема (нет новых ответов) Как правильно сделать категории на сайте?
Хелппп!!!
5 norino 670 11.12.2017, 16:28
автор: One_on_One
Открытая тема (нет новых ответов) Проги для редактирования style.css
14 minutkin 1054 11.12.2017, 16:01
автор: Nell
Открытая тема (нет новых ответов) Как привязать меню к кнопке <nav> ?
2 pippak 899 11.12.2017, 15:57
автор: Nell
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
2 boltuk 574 4.12.2017, 14:44
автор: tezoro


 



RSS Текстовая версия Сейчас: 16.12.2017, 9:55
Дизайн