Помощник
|
Выпадающее меню CSS + HTML без JS |
ApTicT
|
Сообщение
#1
|
||
|
|
||
|
|||
dimjan4 |
20.10.2008, 23:06;
Ответить: dimjan4
Сообщение
#2
|
|
|
|
|
Exterior |
22.10.2008, 11:34;
Ответить: Exterior
Сообщение
#3
|
|
ApTicT, вот наглядный примерчик:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>CSS Menu</title> <!-- Style CSS --> <style type="text/css"> <!-- * { margin: 0; padding: 0; } body { font: 11px Verdana; background: #EEE; color: black; } .forum_but { width: 700px; margin: 0 auto; text-align: right; } /* ///////////////////// */ .wrapper { width: 700px; height: 300px; margin: 30px auto 0 auto; background: white; border: solid 1px black; } .wrapper a { width: 174px; padding: 3px; display: block; background: white; color: black; text-decoration: none; } .wrapper a:hover { display: block; background: salmon; color: white; } .item1_norm { width: 180px; height: 18px; margin: 30px 0 0 10px; float: left; overflow: hidden; border: solid 1px black; } .item1_hover { width: 180px; margin: 30px 0 0 10px; float: left; overflow: visible; border: solid 1px black; } .item2_norm { width: 180px; height: 18px; margin: 30px 0 0 10px; float: left; overflow: hidden; border: solid 1px black; } .item2_hover { width: 180px; margin: 30px 0 0 10px; float: left; overflow: visible; border: solid 1px black; } --> </style> </head> <body> <div class="wrapper"> <div class="item1_norm" onmouseover="this.className='item1_hover';" onmouseout="this.className='item1_norm';"> <a href="http://html.by/"><strong>HTML форум</strong></a> <a href="http://html.by/forumdisplay.php?f=3">Создание сайтов</a> <a href="http://html.by/forumdisplay.php?f=4">Web-программирование и БД</a> <a href="http://html.by/forumdisplay.php?f=6">Дизайн</a> <a href="http://html.by/forumdisplay.php?f=5">SEO – Оптимизация сайта</a> <a href="http://html.by/forumdisplay.php?f=28">Интернет Софт</a> <a href="http://html.by/forumdisplay.php?f=23">Хостинг и Домены</a> <a href="http://html.by/forumdisplay.php?f=7">Общий</a> </div> <div class="item2_norm" onmouseover="this.className='item2_hover';" onmouseout="this.className='item2_norm';"> <a href="http://html.by/forumdisplay.php?f=8">HTML</a> <a href="http://html.by/forumdisplay.php?f=9">CSS</a> <a href="http://html.by/forumdisplay.php?f=10">JavaScript</a> <a href="http://html.by/forumdisplay.php?f=35">Обзор и оценка сайтов</a> <a href="http://html.by/forumdisplay.php?f=11">PHP</a> <a href="http://html.by/forumdisplay.php?f=13">Web-дизайн</a> <a href="http://html.by/showthread.php?t=2575">Выпадающее меню на CSS</a> </div> </div> <div class="forum_but"> <a href="http://html.by/"><img src="http://html.by/images/banners/html.gif" width="88" height="31" border="0" alt="Форум WEB-мастеров" /></a> </div> </body> </html> |
|
|
dimjan4 |
23.10.2008, 21:37;
Ответить: dimjan4
Сообщение
#4
|
|
С "CSS Menu Generator" легче делать меню! Там даже прописывать ничего ненадо! Просто вставить код!
|
|
|
Exterior |
24.10.2008, 0:25;
Ответить: Exterior
Сообщение
#5
|
|
|
|
|
ApTicT
|
Сообщение
#6
|
|
|
|
|
Albert_hb |
25.10.2008, 13:04;
Ответить: Albert_hb
Сообщение
#7
|
|
вот именно! А что б головой подумать да свое что-нибудь сделать? Делая меню, сайты и т.п. через свякого рода генераторы, вряд ли научишься хорошему сайтостроению... может и так. я с генераторам выпадающих меню познакомился, когда клиент забраковал распространенный вариант без js-ного на списках, и купил лицензию на QuickMenu. Вот тот сайтик: http://themiamimasters.com/ :rolleyes: |
|
|
Exterior |
25.10.2008, 15:15;
Ответить: Exterior
Сообщение
#8
|
|
Albert, да, заказчики - это очень придирчивый и изменчивый контингент, но если нужно простое и эффективное меню без "крутых" (порой ненужных и отвлекающих) наворотов, то вариант only css самое то.
|
|
|
picap111 |
16.4.2009, 17:57;
Ответить: picap111
Сообщение
#9
|
|
можно ли, сделать горизонтальное меню в css чтоб выпадающий список выпадал вверх????
|
|
|
тропой Тигра |
2.2.2010, 15:24;
Ответить: тропой Тигра
Сообщение
#10
|
|
Добрый день! Взял шаблон меню но оно не отображается на странице как надо. Скажите куда ставить настройки CSS
они выглядят так /* CSS Document */ } ul#cssmenu { width:350px; margin: 0; border: 0 none; padding: 0; list-style: none; background: #003366; height: 30px; font: bold 12px/28px Verdana, Arial; border-left:#003366 1px solid; } ul#cssmenu li { margin: 0; border: 0 none; padding: 0; float: left; display: inline; list-style: none; position: relative; height: 30px; } ul#cssmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; display: none; position: absolute; top: 30px; left: 0; } ul#cssmenu ul:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#cssmenu ul li { width: 150px; float: left; display: block !important; display: inline; } /* Main Menu */ ul#cssmenu a { border: 0px; padding: 0 10px; float: none !important; float: left; display: block; background: #003366; color: #FFFFFF; font: bold 12px/28px Verdana, Arial; text-decoration: none; height: auto !important; height: 1%; } /* Main Menu Hover */ ul#cssmenu a:hover, ul#cssmenu li:hover a, ul#cssmenu li.iehover a { background: #FFFFFF; color:#003366; border-top:#003366 1px solid; } /* Second Menu */ ul#cssmenu li:hover li a, ul#cssmenu li.iehover li a { border-top: 2px solid #FFFFFF; float: none; background: #003366; color: #FFFFFF; } /* Second Menu Hover */ ul#cssmenu li:hover li a:hover, ul#cssmenu li:hover li:hover a, ul#cssmenu li.iehover li a:hover, ul#cssmenu li.iehover li.iehover a { border-top: 2px solid #FFFFFF; background: #FFFFFF; color:#003366; border:#003366 1px solid; } ul#cssmenu ul ul { display: none; position: absolute; top: 0; left: 170px; } ul#cssmenu li:hover ul ul, ul#cssmenu li.iehover ul ul { display: none; } ul#cssmenu li:hover ul, ul#cssmenu ul li:hover ul, ul#cssmenu li.iehover ul, ul#cssmenu ul li.iehover ul { display: block; } Вот меню которое показано здесь выше показывается на странице корректно, а это нет! |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
PROXY-STORE.COM — ipV4 прокси от 42р В МЕСЯЦ с ротацией и без! Лучшая цена на рынке. 200+ стран | 18 | proxystore | 4688 | Вчера, 20:00 автор: proxystore |
|
Вёрстка HTML-писем | 30 | Vampler | 28859 | 27.3.2024, 12:41 автор: Vampler |
|
Скрипты и программы на заказ любой сложности. Без предоплаты. Быстро, качественно и недорого! | 4 | c4p1t4l15t | 2238 | 26.3.2024, 21:38 автор: c4p1t4l15t |
|
Сайт не индексируется в Google без добавления ссылок в адурилку | 4 | Nekit | 991 | 20.3.2024, 21:44 автор: MorKer |
|
JustProxy - Резидентые прокси без ограничения по трафику Residential rotating proxy |
16 | justproxy | 5641 | 20.3.2024, 14:57 автор: ManagerAE8888 |
Текстовая версия | Сейчас: 29.3.2024, 12:00 |