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



 

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

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Выпадающее меню CSS + HTML без JS
ApTicT
ApTicT
Topic Starter сообщение 20.10.2008, 20:00; Ответить: ApTicT
Сообщение #1


Надо сделать выпадающее меню без Яваскрипта, и чтоб легко редактировалось(добавления подменю, изменение...):dobr:
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dimjan4
dimjan4
сообщение 20.10.2008, 23:06; Ответить: dimjan4
Сообщение #2


Попробуйте программу CSS Menu Generator


http://wild.softodrom.ru/ap/p5289.shtml
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
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
dimjan4
сообщение 23.10.2008, 21:37; Ответить: dimjan4
Сообщение #4


С "CSS Menu Generator" легче делать меню! Там даже прописывать ничего ненадо! Просто вставить код!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 24.10.2008, 0:25; Ответить: Exterior
Сообщение #5


(dimjan4 @ 24.10.2008, 00:37) *
Там даже прописывать ничего ненадо! Просто вставить код!


вот именно! А что б головой подумать да свое что-нибудь сделать? Делая меню, сайты и т.п. через свякого рода генераторы, вряд ли научишься хорошему сайтостроению...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ApTicT
ApTicT
Topic Starter сообщение 24.10.2008, 17:50; Ответить: ApTicT
Сообщение #6


(Exterior @ 24.10.2008, 03:25) *
вот именно! А что б головой подумать да свое что-нибудь сделать? Делая меню, сайты и т.п. через свякого рода генераторы, вряд ли научишься хорошему сайтостроению...

Эт, точно, спасибо буду заниматься этим кодом!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Albert_hb
Albert_hb
сообщение 25.10.2008, 13:04; Ответить: Albert_hb
Сообщение #7


(Exterior @ 24.10.2008, 03:25) *
вот именно! А что б головой подумать да свое что-нибудь сделать? Делая меню, сайты и т.п. через свякого рода генераторы, вряд ли научишься хорошему сайтостроению...

может и так. я с генераторам выпадающих меню познакомился, когда клиент забраковал распространенный вариант без js-ного на списках, и купил лицензию на QuickMenu. Вот тот сайтик: http://themiamimasters.com/ :rolleyes:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 25.10.2008, 15:15; Ответить: Exterior
Сообщение #8


Albert, да, заказчики - это очень придирчивый и изменчивый контингент, но если нужно простое и эффективное меню без "крутых" (порой ненужных и отвлекающих) наворотов, то вариант only css самое то.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
picap111
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;
}


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) 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


 



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