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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


Здравствуйте, помогите из обычного горизонтального меню сделать посредством 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%; }


--------------------
AppSell - Купить или продать бизнес, стартап, игру, мобильное приложение..
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nicolasik
Nicolasik
сообщение 22.9.2011, 23:21; Ответить: Nicolasik
Сообщение #2


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


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


Проблема еще не решена.


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


Попробуйте дописать в 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


dan1, сами выпадающие ссылки отображаются некорректно. Ссылку на сайт отправил в лс.


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


Посмотрел, что получается..
У вас написано следующее:
.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


dan1, Спасибо большое =)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
AppSell - Купить или продать бизнес, стартап, игру, мобильное приложение..
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужно сделать репост статей в соц сети
1 HavingingWorld 2504 27.2.2024, 2:15
автор: AndrePro
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3497 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3429 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Сделать дорвей
0 tok24ua 935 28.8.2023, 20:59
автор: tok24ua
Открытая тема (нет новых ответов) Сделать правки на html-странице
5 TABAK 2312 20.5.2023, 10:45
автор: EvilGomel


 



RSS Текстовая версия Сейчас: 26.4.2024, 3:12
Дизайн