Теги:
Дата: 24.09.2008
В этой статье я расскажу вам как сделать выпадающее меню на CSS . Преимущества такого меню думаю очевидно. Самое главное из них – это то, что такое меню будет работать при выключенном Java Script в браузере. Будут рассмотрены 2 идентичных примера меню, первое – горизонтальное меню, второе – вертикальное меню. Принцип действия у них один и тот же.
Начнем с горизонтального меню, оно имеет следующий HTML код:
<ul id="cssmenu">
<li><a href="#">Горизонтальное</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
</ul>
</li>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
</ul>Принцип думаю ясен и вы сообразите как вставить свои пункты меню. Теперь напишем 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;
} Все!?!? Ан нет. IE никак не хочет отображать такое меню как нам надо, поэтому напишем небольшой JavaScript для IE:
// JavaScript Document
function cssmenuhover()
{
if(!document.getElementById("cssmenu"))
return;
var lis = document.getElementById("cssmenu").getElementsByTagName("LI");
for (var i=0;i<lis.length;i++)
{
lis[i].onmouseover=function(){this.className+=" iehover";}
lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");}
}
}
if (window.attachEvent)
window.attachEvent("onload", cssmenuhover);Вуаля. Теперь наше меню кроссбраузерное и корректно работает в IE5.5+, FF1+, Opera8+. Теперь посмотрим как делается вертикальное меню.
Вертикальное CSS меню
HTML код:
<ul id="navmenu-v">
<li><a href="#">Вертикальное</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
</ul>
</li>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul></li>
</ul>И CSS код:
/* CSS Document */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}
ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
border:#003366 1px solid;
}
ul#navmenu-v li ul li {
border:none;
border-bottom:#FFFFFF 2px solid;
}
/* Root Menu */
ul#navmenu-v a {
padding: 0 6px;
display: block;
background: #003366;
color: #FFFFFF;
font: bold 12px/28px Verdana, Arial;
text-decoration: none;
height: auto !important;
height: 1%;
}
ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #FFFFFF;
color: #000000;
}
/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #003366;
color: #FFFFFF;
border:#003366 1px solid;
}
ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #FFFFFF;
color: #003366;
border:#003366 1px solid;
}
ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 161px;
}
ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}
ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}Ну и небольшой JS код для корректности отображения в IE:
navHover = function() {
var lis = document.getElementById("navmenu-v").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);Вот собственно и все, смотрим что получается.
Скачать >>
CSS горизонтального меню, JS горизонтального меню | CSS вертикального меню, JS вертикального меню
- Войдите на сайт для отправки комментариев
Действительно классная штука. Смотришь и все кажеться просто. А пробуешь интегрировать в XML - облом получается.. как это не прискорбно. Ручки наверно у меня кривоваты.
А они с опытом выпрямляются ). У меня тоже не всегда прямые были. Терпение и труд все выпрямют ).
тема очень пригодилась!!! но возникла неболшая проблема при размещение в разных ячейках скрипт в ИЕ срабатывает толко на первой. В опере работает все прекрасно. Не могли бы вы подсказать как решить данную проблему?
вот как размещено меню.
Ой сори както неправильно вставилось(((
Александр у списка ul в меню есть класс по которому js находит это меню. У вас нехватает открывающего тега ul. Проверьте все внимательно... Мой пример работает, ваш код ничем не отличается от моего.
Opera 9.62 - Все коряво
В Opera9.62 все нормально.
А также в IE6, IE8, FF3
Спасибо, как раз надо было переделать меню у одного сайта.
Перехожу на http://cssor.ru/examples/cssmenu/cssmenu.htm
И у меня вот так http://shsweb.ru/shs.jpg (наведено на меню "Вертикальное")
Информация о версии Opera
Версия: 9.62
Сборка: 10467
Платформа: Win32
Система: Windows XP
Версия Java: Sun Java Runtime Environment version 1.6
Небольшой вопросик:
Так будет работать при выключенном JS или нет?
Хорошо было бы еще сделать небольшую задержку в выпадающих меню (для пользователей
с медленной моторикой) и задержку меню на экране после того, как с него убрали мышку. Тогда бы меню при включенных скриптах работало вообще на ура.
Помогите пожалуйста разобраться. У меня в ИЕ не работает!
В Oper 9.62 все ок! А в ИЕ не работает.
За ранее спасибо!
нужна помощь
выподащее меню жто тема,но как сделать стобы оно выподало не только просто в низ а разпологалась под полоской меню тоже в горезонтальном направление? (речь о горизонтальном меню)
Я рылся в инете пол дня в приключениях всплывающего меню, а на следующий день наткнулся на этот прекрасный сайт с лучшим описанием по созданию меню, тут всё просто описано, можно сказать уже всё сделано, только 3 кода копируешь и всё good.
Благодарю за статью!
Спасибо, очень помогли!
Хорошая статья! Может подскажете возможно ли сделать, и если возможно, то как, при наведении на область выпадающего меню(возьмем горизонтальное) делать его видимым, т.е. не только при наведении на главные пункты меню (li:hover ul) но и на область подменю , пробовал как-то так ul:hover{display:block}, не получается..
Dim Не пробовал, но думаю ul li ul:hover - на это надо завязывать, причем ul li ul должен иметь фиксированную высоту. Если не получится, то jquery это можно сделать.
Описал бы ещё как сделать меню с 3 ступинем выпадания в бок.
А как сделать, что бы меню выпадало после нажатия?
Как например у Лебедева на http://www.tiger-asset.com/funds/ ?
Глеб, такое на ява скрипте можно реализовать.
Доброе время суток.
Целый месяц искал подобную информацию о меню подобных классов.На других ресурсах либо давали ссылки либо все было мрачно и заумно.А тут у Вас просто и лаконично.Нашел некоторые ошибочки у себя исправил и все сразу заработало.Большое спасибо Авторам данного рессурса.
С уважением Алексей
Подскажите пожалуйста, как задержку организовать? после вывода мышки с меню чтоб оно например через секунду закрывалось? очень нужно. Спасиб
В опере версии 9 плохо работает. Вып. меню закрывается прежде чем можно выбрать ссылку )) что делать?
Или это только под ИЕ делалось?
Tim, подвинь выпадающее меню в нужную сторону, чтобы не было пустого пространства.
Еще вопросик. В ie6 навожу на ссылку и меню не появляется в чем может быть проблема?
Сори проблема решена... Это моя ошибка
Огромное спасибо! Столько всяких вариантов перепробовала, и ничего путёвого, а тут настолько всё просто, и самое главное - РАБОТАЕТ! Спасибо автору!
Доброе время суток.
У меня ко все Вам несколько вопросов
1.Как добиться чтоб Анимированные GIF картинки коректно функциоировали на браузерах Опера осбенно IE FF
2.Как добиться с помощью CSS чтобы свое творение нормально отображалось во всех переисленых браузерах.
3.Как вставить в кнопку сделанной посредством CSS GIF анимированный фрагмент (файл)
Заранее благодарен с уважением Алексей
Здравствуйте Алексей!
1. GIF как правило корректно функционирует во всех браузерах, поясните что не так функционирует.
2. С опытом все будет, я тоже не сразу начал хорошо верстать.
3. Честно говоря не знаю, не пробовал так никогда.
Доброе время суток уважаемый Администратор.
Вы ответили мне:
1. GIF как правило корректно функционирует во всех браузерах, поясните что не так функционирует.
2. С опытом все будет, я тоже не сразу начал хорошо верстать.
Поясню:
1. Сделал анимированный маячок т.е. в Опере и Мазиле он функционирует нормально (мигает) а вот в браузере Internet Eploret не работает.
За ранее благодарен с уважением алексей
Alexey я думаю тут дело в настройках IE. Зайдите в "Сервис" -> "Свойства обозревателя" -> "Дополнительно" там поставьте галочку напротив "Воспроизводить анимацию на веб-страницах".
Доброе время суток уважаемый Администратор.
Да дествительно все оказалось в настройках.Поднастроил по Вашей рекомендации и все начало функционировать.
С уважением алексей
Скажите пожалуйста в чем может быть проблема:
Вот картинка как открывается меню в Опере и в ИЕ:
http://imageshost.ru/links/007e5067930fc94875893feb787c81cc
А вот тоже меню в Firefox:
http://imageshost.ru/links/1f6ea1a5430cbf9b71b79ff0a3034867
Получается, что в Опере и в Ие выпадающее меню корректно отображается. А в FF не при наведении на меню букв не видно и само выпадающее мнею без заднего темного фона.
Причем такая вещь происходит когда вставляешь меню в сайт.
Отдельно меню корректно отображается во всех браузерах.
На сайте есть свой CSS файл, может в нем проблема?
Вот сам CSS файл с сайта: http://exfile.ru/30947
Чего только не пробовал. Может от кривизны ума или рук - но проблему так и не устранил.
Alex Johnson, у ul вашего меню попробуйте дописать свойство position:absolute;
Больше в голову мне ничего не приходит и разгадывать код по картинкам пока не научился. Изучайте CSS и учитесь верстать дивами, вот что еще могу добавить.
Меню нравится, вот только вопрос есть.
делаю два фрейма (два столбца) и надо что бы вертикальное меню было в левой колонке. делаю, но при наведении, когда вылезает под меню, оно раздвигает левый фрейм, а надо чтто бы оно было поверх.
Владислав
Фреймы нынче не в моде ), я честно говоря мало знаком со фреймами. Попробуйте position:absolute; написать для стилей слоя или ul вашего меню.
Хорошо, если без фреймов, тогда как сделать что бы меню всегда было на экране, даже когда прокручиваешь текст?
Заранее спасибо.
Владислав
position:fixed;
выпадающее меню в ие 6-м кагбы моргает когда начинаеш двигать курсором по вкладкам, причем моргает с задержкой в 0,3с гдето... пнг-фикс пробывал подключать - не очень помогло, другие бока полезли... подскажите, что можна сделать.
Андрей
Не понял о чем вы, у меня не моргает.
подскажите, а можно сделать чтоб горизонтальное меню вападало вверх???
Павел
Вам стоит познакомиться со свойством "marign", оно может принимать отрицательные значения.
возник вопрос такого рода: необходимо сделать во втором меню всплывающем
1) расстояние между строчками меньше (определенно line-height, но куда?)
2) данный список промаркировать таким образом - type="square", но при указании в HTML ul id='navmenu-v' сценарий не рагирует на li type='square'
Добрый день!
Не могу разобраться, где сделать высоту блока в нужные мне 28px.
Подскажите пожалуйста.
Павел Старостин
1. В этом меню нету значения "расстояние между строчками (line-height)" и его лучше не ставить, но есть значение высоты пункта меню: height: 30px; у ul#cssmenu li.
2. У ul#cssmenu вместо list-style: none; поставьте list-style-type: square;
Егений
У ul#cssmenu и у ul#cssmenu li есть значение высоты в 30px, надо менять оба.
Berkoot
там не пару строчек надо добавить, побольше, это меню больше чем на два уровня не расчитано. Может в будующем опубликую статью про многоуровневое.
Когда в всплывающем пункте меню пункт состоит из длинных слов, так что они не влазеют на одну строку, а например в две строки, то при наведении курсора мышки на такой пункт и, подержав его немного на этом пункте, дальше меню срывается и чтоб его раскрыть нужно опять навести по родительскому пукту меню, но иногда такого не происходит, что может быть за глюк?
Админ попробуй в своём примире вертикального меню, который тут приводится вместо пункта Вертикальное>Ссылка 1 написать Вертикальное> вертикальное ссылка 1 т.е. увеличить количество слов чтоб они в две строки появились, мне интересно посмотреть здесь такойже глюк будет как у меня или нет?
Спасибо!
а куда нужно вставить JS для отображения вертикального меню в IE??? а то у мя ещё руки кривоватые..)))
Спасибо за статью очень помогла!:)
После долгих часов изменения кривого шаблона под движок голова уже почти не работает...
Создать отдельный js файл. В этот файл написать сам скрипт.
И вставить ссылку на js файл в промежуток между /style и /head
если в HTML меню состоит из белее чем 2-х под меню, то казалось бы все отображается нормально.
Но вот в чем проблема, второе меню у меня длинее, чем первое, т.е. не 120 , а 240.
изменил немного.
но проблема в том, что третье меню скрывается под первым :( (т.е. оно сдвигается на 120 пикселей )
реально ли это как-то исправит?:)
Буду очень благодарен за дельный совет.
И кстати, это третье меню видно только в IE , в опере не видно:(
Здравствуйте!
Подскажите, пожалуйста, как сделать задержку сворачивания вертикального меню.
В IE6,7 при наличии более 5 пунктов второго уровня, при наведении на них мышкой, после второй или третьей позиции меню самостоятельно сворачивается (срывается с мышки).
В IE8, FF, Chrome все нормально отражается и работает.
Проверил (через IE6) у Вас на сайте на примере вертикального меню, в позиции CSS есть такая же тенденция, но слабо выраженная. Пример с позиции "Меню" на позицию "CSS" и на подуровень"CSS" бывает срыв.
Подскажите, как решить проблему.
Спасибо, хорошая статья
Все хорошо, но вот только вы не уточнили куда этот жава скрипт сувать :) как мне новичку в этой сфере не очень понятно сувал в хтмл документ там он не работает, а эсли ставить в отдельный то как подключить ? ..........
Гость
У всех новичков есть такая фобия (и у меня тоже была) - посмотреть исходный код. Как только от нее избавитесь, дела пойдут быстрее. В статье дан пример - http://cssor.ru/examples/cssmenu/cssmenu.htm, загляните в его исходный код (там его немного).
Здравствуйте!
У меня проблема...
Хочу чтоб вместо фона было изображение, вставляю вместо строчки с цветом фона следующую строку: background: url(img/image.gif);
К тому же еще картинки меняются при наведении мышки динамически, это не трудно...
Но вот беда - само меню сверху - 1ый уровень очень узкое и его никак мне на расширить...
Использую только одно меню 1-го уровня и оно выдвигается на 3 подменю, остальное удалил...
Вот такая проблема...
Заранее спасибо!
С уважением, Андрей...
Прошу прощения... Разобрался... Добавил width: 150px; в блок /* Main Menu */...
Но вот теперь проблема - меню раскрывается со 2-го раза в ИЕ, хотя Мозила с первого схватывает...
В чем может быть дело????
Спасибо...
Andrew
Уберите width: 150px; и сделайте нужную вам ширину с помощью padding-left и padding-right
Ширину убрал...
padding-left и padding-right не помогают, все меню начинает съезжать...
Я просто не очень продвинутый юзер, может поможете мне советом?
Мне надо сделать так, чтобы горизонтальная составляющая состояла из 1 пункта и она раскрывалась вниз на неск пунктов...
padding-left и padding-right в какой блок засунуть? В /* Main Menu */
ul#hmenu a {} или куда?
Andrew
Пробуйте, экспериментируйте. Так слету не могу сказать что вам нужно и куда вставить.
Как эту всю красоту с php реализовать, кто пробовал?
Гость
Я пробовал, не вижу проблем, что вас смущает?
Нижайший поклон автору. Спасибо огромное. Только осваиваю создание сайтов, а заказ довольно сложный по навигации. Флешменю толком вставить не получалось... криво, да и не настроишь их под нужды, маловато настроек. А эта технология прямо в десятку. И главное очень вовремя нашёл эту страницу. За ночь разобрался и на следующий день уже сдал работу.
Ещё раз большое спасибо.
Огромное спасибо автору!
Благодаря этой статье разобрался в принципе создания меню на css :)
Спасибо автору!!!!
Сделал на сайте меню по этому руководству...
Куда код выслать, может что-то посоветуете
М-даа... В Опере 9.64 все здорово, работает, а в ie6 выпадающее меню не появляется. Уже наверное раз 10 вставляла таблицу - никак :(. У Тима тоже такая проблема была,
линк http://www.meteo-tv.am/alp/index2.html
Заранее спасибо...
Здравствуйте. У меня проблема такая: отдельно меню работает отлично во всех браузерах, а как только вставляю в код, оно отказывается работать.Появляется только строка : горизонтальное CSS меню. А дальше ничего не выпадает.Из-за чего это может быть?
Вот какая штука вышла... В ИЕ 6 билась, билась, да ничего путного не вышло. Стала аж подозревать у себя кривизну мозгов :) Вот и скачала в депрессии ИЕ8 с прилагающимися апдейтами, и - пожалуйста! Никаких проблем. Стало быть - глюки моего браузера. Уже в прошлом:)
Спасибо всем!( особенно терпеливому учителю ;) )
Наконецто нашелся добрый человек и показал как все просто. Спасибо Вам огромное все вышло. Но есть вопросик. js rjl куда вставлять? В HTML или CSS? Спасибо за помощь.
JS надо вставлять в JS ), в файлик с расширением .js или в специальные теги прям на странице.
Посмотрите исходный этого сайта, думаю найдете.
Скажите,где необходимо в CSS Стиле прописать чтобы при наведении курсора на подменю оно мало того высвечивалось а еще и появлялась стрелка с правого боку и шрифт менялся на жирный.Спасибо.
Гость
Спасибо вам большое за ваше старание но я уже вбил код нужный мне.
Скажите а ваш форум можно каким то образом отправить картинку.
Гость
Ссылку можно оставить на картинку.
Спс за ссылку Antonidka много интересного там нашла!
A как добавить многоуровневое меню? Я пытаюсь сделать, получается разрыв :(
Mondeo
Докатывать погрешности самому или погуглить.
вот в чем проблема, вставил меню на сайт, в мазиле все работает прекрасно, а вот в ие 6 меню тоже работает но прыгает от мышки и позиционируется по центру страницы а не там где должно быть, подскажите где что не так.
Спасибо за урок, только вот ваше вертикальное меню не работает в ИЕ6, наводишь на пункт например CSS дальше курсор двигаешь вправо чтобы выбрать подпункт, а меню тут же исчезает...
А как сделать 2 менюшки? Ну то есть главных пунктов много, в 1 ряд все не влазит,
если делаю два
, то подпункты при наведении не перекрывают слои. z-index: 10000 !important; тоже не помог(может не правильно его использую)
Спасибо за код.
Только у меня такая проблема: нужно, чтобы вертикальное меню находилось под горизонтальным без кучи .
Если в примере http://cssor.ru/examples/cssmenu/cssmenu.htm убрать несколько меню менюшками, то верхнее выпадающее меню (пункты) отображается под вертикальным.
Заранее спасибо за помощь.
Если в примере http://cssor.ru/examples/cssmenu/cssmenu.htm убрать несколько "br" между менюшками, то верхнее выпадающее меню (пункты) отображается под вертикальным.
И все-таки, объясните чайнику. У меня в коде горизонтальное меню используется три раза. В IE в первом случае все хорошо, а вот дальше во втором и третьем не раскрывается второй уровень. В других браузерах все ок.
Александр
Меню рассчитано на один уровень.
Здравствуйте, извините пожалуйста за нубский вопрос, а куда вставлять JavaScript для IE? Между какими тегами?
Подскажите как разместить меню по центру.
Леха прям перед хеадом где линк на стиль, вставляй линк на скрипт.
Леха
Гость верно подсказал, посмотри исходный код примера - http://cssor.ru/examples/cssmenu/cssmenu.htm , там найдешь думаю.
Гость
у ul#cssmenu в место margin:0; сделай margin:0 auto; и будет по центру.
Доброго времени суток! Не вижу условия использования информации. Можно ли копировать написанный вами текст на свой сайт, если ставить ссылку на эту страницу?
admin
Извиняюсь не представился сразу...
Касательно вопроса оцентровки меню
Гость
у ul#cssmenu в место margin:0; сделай margin:0 auto; и будет по центру.
поменял все так же... меню меняется начало слева и начало справа если менять параметр float в ul#cssmenu li но там либо left либо right.
А мне надо чтобы меню было горизонтальным и по центру;)
Вы, конечно будете ржать))) и всё же, скажите у меня отдельный код для шапки сайта, куда именно вставлять код css?)))))заранее спс
с предыдущей проблемой разобрался)) я нуб, но появилась следующая:
тоже самое: у меня под гориз. меню сразу следуетвертик, причём кjulf выпадают ссылки, нои появляются под ветрик. меню(( и их не видно. Помогите (заранее спс)
Подскажите пожалуйста!!!
Я скопировала код и в итоге у меня отображается меню только первого уровня (выпадающего меню нет!) Что мне сделать, я ничего не понимаю!!!!
P.S Очень надо, чтоб вы мне помогли!
Такая ошибка возникает в IE, но вот в Мозиле всё работает
serhz
Не ставьте одно меню под другим ).
Лена
В конце статьи дан JS код для корректировки выпадающего меню в IE.
Большое спасибо уважаемый admin! Спасибо! Спасибо! Спасибо!
admin, не могу, а никак не сделать чтобы это меню поверх выпадало?
serhz
Как это сделать кроссбраузерно я не знаю.
admin,мне только для мозиллы, плиз)
serhz
для ul#cssmenu ul li добавьте: position:relative; z-index:100;
Спасибо, работает!
Большое спасибо! Просто, ясно, функционально, исчерпывающе. По делу и без проволочек.
А многоуровневое вертикальное меню, когда появится?
Еще нужен код на php для многоуровневого вертикального меню.
(примерный код |id|name|parent|)
Но тут закрывающие
убраны, иначе скрипт не работает. Как его доработать, чтоб красиво было?
Спасибо.
Я всегда верстал всё с помощью css & html.
Меня интересует вопрос почему браузеры не видят java он как сплошным текстом отображается
СПС Толковый пример, обсолютно понятен, и прекрасно поддается модификации. Приятно что сделан ч-з css. Короче, инфа Очень пригодилась!!!
Огромное спасибо за меню.
видела много вариантов исполнения горизонтального выпадающего, но этот мне кажется наиболее удачным.
Подскажите, пожалуйста, как сделать, чтобы меню выпадало вверх, а не вниз
Уже пол года я интересуюсь выпадающими меню но лучшего примера не встречал.
ЛУЧШИЙ ИЗ ВСЕХ ПРИМЕРОВ ВЫПАДАЮЩЕГО МЕНЮ!!!
Спасибо!
Спасибо.
Много всего понаписано в сети. Но приятно, когда где-то простые вещи описаны простым языком.
Да, действительно, достаточно все скопировать и вставить, чтоб это все заработало!
Спасибо
Скажите, пожалуйста, а Ява-скрипт код для Эксплорера куда вставлять надо в ШТМЛ-е? Между какими тегами? Был бы очень благодарен, перепробовал и так и сяк, не получается ((...
ЛУЧШИЙ ИЗ ВСЕХ ПРИМЕРОВ ВЫПАДАЮЩЕГО МЕНЮ!!!
//* Вот так вставлять (между тегами head):
У кого в IE6 не работает смотрите внимательно на JS код может поможет )))
Благодарю, у самого бы ушло на написание несколько дней. Просто огромнейшее спасибо тому кто написал данный код.
Кстати, а почему-то у меня не получается Вертикальное CSS меню
HTML код ? Горизонтальное вставил норм, вот вертикальное нет? Но мне нужно вертикальное.
Теперь почему-то и горизонтальное меню не отображается нормально. Вот как отображается:
Горизонтальное
Ссылка 1
Ссылка 2
CSS
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Ссылка 5
Меню
Ссылка 1
Ссылка 2
И всё.
Что я сделал неправильно? Я просто добавиk HTML и всё. CSS добавлять необязательно же?
Объясните мне пжл. как вставить горизонтальное меню на сайт, на главную страницу? Вначале горизонтальное меню вышло - затем перестало выходить , что нужно сделать? Что именно вставить, html или css ?
Почему у меня не выходит ни горизонтальное, ни вертикальное меню?
Вот как выходит:
Горизонтальное
Ссылка 1
Ссылка 2
CSS
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Ссылка 5
Меню
Ссылка 1
Ссылка 2
Добрый день!
Не могли бы вы дать хотя бы намёк, как задать свой цвет фона для каждой группы (колонки) вертикального меню?
С уважением, Alex
Всё-таки, какой код надо вставлять для отправки IE на js-файл?
Уважаемый Админ.
Объясните, как можно сделать следующий эффект?
Когда в подменю ссылка содержит название из нескольких слов, то оно распространяется на несколько строк, между которыми большие интервалы. Как сделать так, чтобы их не было и строки были вплотную друг к другу?
В каком месте нужно изменить/добавить по Вашему примеру?
Скажите, пожалуйста, в чем косяк... Выпадающие вправо подменю прячутся ПОД сентральный "div". Как вывести их поверх него?
Был бы признателен если бы подсказали, что подправить в Вашем меню, чтобы оно работало как здесь:
http://www.lwis.net/free-css-drop-down-menu/dropdown.simple.linear.html
т.е. чтобы вываливалось горизонтально.
???
Спасибо автору за менюшки огромное!
Пожалуй, действительно лучшее из того что есть в инете по этой теме. Легко ставится, легко настраивается стиль, хорошо работает. Кстати, на ИЕ 8- прекрасно без скрипта. На Опере-10, тоже замечательно. Лиса 3.6 и Хром - как и следовало ожидать без проблем.
А самое главное - материал актуальный, а не Богом забытый код, на который браузеры смотрят как на кости мамонта ледникового периода ! :)
Мой почтения!скажыте как запустить выпадающие меню!все делаю как буто правельно но нет!воопщето она есть но она поевляетса сражу и не прячетса просто я ищо не очень в этом профи может чтото не туда ставлю! буду очень благодарен зарание спосибо всем!
а можно поконкретнее как и в какое место,новичкам сложно понять...:(
куда уж конкретнее? на странице всего одно такое место, его надо просто найти.... Оно в начале кода страницы
http://мой сайт/menucss.js как эту ссылку вставить?просто как есть воткнуть или както ещё?
вот это пример тега подключения скрипта из кода этой страницы.... там их тьма тьмущая, естестно, путь к файлу и его имя (в примере это /themes/sitecss/rounded.js?B) надо указать свои и ткнуть эту строчку после тегов link type...
в твоем случае
или
ну вот, о тегах я и не подумал..... открой код этой страницы, найди указанный выше путь и сделай в своей точно так же, только путь свой укажи и будет тебе щастя! все работает как надо
нет ничего...
прикалываешься? любая страница начинается с блока тэгов head в которых идут тэги meta, затем
link type="text/css" и script type="text/javascript".... последние тебя как раз и интересуют.
Если у тебя их нет, то тебе и скрипт не нужен, поверь.... Другое дело, если ты используешь движок какой-нибудь. Тогда ищи файлы header.php или что-то подобное, которые отвечают за формирование хидера страницы. Там ты и найдешь эти тэги...
да нет ничего смешного, все через это проходили или проходят. Еще раз, если ты пользуешь движок, по другому - система управления контетном или CMS, то страницы на сервере ты не найдешь и файл index.php удивит тебя своими размерами и содержанием. Вся твоя страница разбросана по разным файлам на сервере. Они, обычно, рядом с index.php. Открывай все подряд, пока не найдешь script type="text/javascript"... в угловых скобках.... туда и вставляй.
у меня сайт на ucoz ,вот строка
link type="text/css" rel="StyleSheet" href="http://сайт/_st/my.css"
за ней
/head
zet! а вот вопрос на засыпку. Ты само меню видишь? Ты стили куда-то вставлял? Фишка в том, что скрип нужен только для ИЕ, и то 8-я версия ишака работает без скрипта, 6.2 - вот той нужен скрипт. А вот без указания стиля меню не работает - выглядит как простой список. Если ты нашел куда вставить ссылку на стиль меню, то скрипт надо впихнуть туда-же, рядом, строкой ниже.
Поюзай меню в Опере или в Мозилле. Им скрипт не нужен, меню будет работать и так.
Ucoz, если мне не изменяет память - конструктор с веб-интерфейсом... я даже не знаю как там добраться до файлов сайта.... никогда не пробовал. И еще, если мне не изменяет память, кажется в аннотации там написано что пользователям запрещено использовать собственные скрипты. Это значит, что твой скрипт будет игнорироваться системой.
Мой тебе совет - перейди на другую CMS. которую можно скачать себе на комп, развернуть в Денвере и делать с ней все что хочешь, а потом вынести ее на хостинг, т.е. в интернет
Меню работает в лисе и в опере замечательно,в експлоере же полный атас,весь сайт перекосило...
первый тэг скажет браузеру что дальше надо читать жабой-скриптом, а последний тэг говорит о том, что дальше снова идет ХТМЛ
ZET Я НЕ ПРОФИ КАНЕШНО далеко НО СО своим кодом уже разобралса.
и совет могу дать как на меня нормальный,поставь на комп прогу-Macromedia Dreamweaver 8,как на меня хорошая штука и многа чему можно научитса даже не зная как делать стили,она почти сама всё делает!на себе испробывал!
А нащот java,просто найди готовые менюшки где используют этот скрипт и там увидеш куда ставить!
Я например так по немношку учусь,хотя месяц назад это всё для меня было на гране фатастики!
Тоже правильно, поставь Дримвиер и будет тебе щастя! Только Макромедиа Дримвиер уже не поддерживается, так как Макромедиа продала права на него Адобе. И теперь он называется Adobe Dreamweaver CS 3, ...CS4 и тд. и ссылок на него в инете не найдешь - они все блокированы. Можно купить за деньги - от 400 баксов. Такая вот мечта :)
Слушай Саш я не понел это что макромедия стоит таких же денег?Или там есть ищо чтото новое?
нет, Макромедиа уже ничего не стоит :) поэтому и ссылок на нее валом в инете. У CS возможностей поболее, она адаптирована к новым стандартам.... ну так говорят. Я ей не пользуюсь, лежит себе где-то на компе. С меня хватило рисования таблиц - сначала рисуем, потом лезем в комп и удаляем лишние тэги, которых там видимо не видимо, потому как такой вот алгоритм у Дримвиера.... проще воспользоваться правой кнопкой мыши и скопировать все что тебе надо много раз. С меня вполне хватает PSPad Причем, когда мне друг сказал - не парься с Дримвиером- пользуйся, так проще, PSPad- ом, я ему не поверил, потом убедился что он прав.
К тому же этот мечтатель претендует на монополию в плане загрузки и выгрузки файлов, а хостеры чихать на это хотели - у многих свои файл- менеджеры, плюс еще путаница с кодировками... ну, что сказать , если тебя Дмир устраивает - тебе повезло!!!!
посмотрим что из себя представляет PSPad.тогда смогу сказать что лучше!Слушай я тут както нашол что ты хотел зделать из вышеуказаной менюшки многоуровневую,чтото вышло?и ищо я смотрю ты уже можно сказать профи,не в курсе случайно можно на один сайт всунуть 2 менюшки,горизонтальную и вертикальную,ато я пробывал чтоото не хочет!
Это двухуровневое меню, большего от него не добьешься. В инете полно примеров 3-х 4-х 5-ти..... уровневых меню. Все они слизаны с одного сайта, говорить какой не буду, прогугли, сразу найдешь.
Вопрос в другом. Есть такое слово "юзабилити". Как по мне, двух уровней хватает с головой иначе можно просто запутаться в сайте, а тебе очееень хорошо придется подумать как позиционировать юзера, чтобы он не заблудился.
Кол-во меню не имеет значения. Хоть сто, любых вертикальных, горизонтальных... конфликтов не будет. Все упирается в юзабилити сайта. Есть много способов раскрыть структуру не прибегая к монстроподобным меню, уводящим в даль дальнюю и безвозвратную, где надежда одна - на кнопку "назад" в браузере, а это не хорошо, сайт должен управляться своими средствами, без помощи интефейса браузера.
Вообще, вертикальная структура сайта требует очень серьезной проработки, иначе сам запутаешься.
Насчет профи. Год назад я начал ковырять эту кухню, как и ты, с Дрима, да с общения с интернет-гуру.... Потом прочитал книгу HTML 4.0 Настоящий учебник. Большой и скучный. Читал месяц, после резко потянуло на PSPad :) И расхотелось общаться с гуру....
Оно канешно хватает но хочетса ищо один уровень для полного щастья.Больше ненадо.А так придетса переделывать всю менюшку.Ну значит такова судьба.За одно ищо немножка опыта наберусь.А в сети я както находил сайт с менюшками.Нащот двух менюшек пробывал ставить не хочет,даже с одельными скриптами.
где -то ошибка, ищи. Надеюсь ты не пытаешься разрезать одно меню на два контейнера? Честно говоря, даже не представляю как это сделать :) У меня работали два меню, два списка один прописанный в коде, другой вызывался из файла... Юзали один класс, один скрипт - без проблем
Измучилась! Помогите! Сделала вертикальное меню, все работает. Но мне нужен маркированный список. Соответственно убираю list-style: none и пишу list-style-image: url(img/list1.gif). А оно нэ хочэт!((( Какие изменения внести в код, ума не приложу:(
Всплывающий маркированный список?! Т.е. вам просто надо рядом с текстом поставить картинку? (судя по тому что вы вставляете)
Это делается за счет фона. Приблизительно так background: #63b8ff url(images/right.gif) no-repeat 97% 50%; здесь цвет задает цвет фона, а картинка images/right.gif позиционируется с помощью процентов от общей ширины и высоты элемента меню. 97 на 50 означает что картинка будет нарисована по середине пункта меню, справа ,отступив на 3% длины....
И как это я сама не додумалась? Покорнейше Вас благодарю, Вы спасли мою пятую точку!
:)
Поробую зделать как предлгаеш!Менюшки разные,кода тоже разные,правда я делал сылки на фаил,и два скрипта ставил!ну нечего сечас попробую!
Не имеет значения как и откуда вызываются меню (т.е. списки) Браузер читает начиная с верхней левой точки экрана и далее слева на право, сверху вниз. Соответственно, надо просто проследить чтобы все списки открывались и закрывались, не более того. Очень полезно отключить стиль списка и убедится что он вообще отображается. Если нет его, то разбираться надо со стилем страницы, а не меню
Спасибо!вышло но всётаки есть одна проблема!когда верхнее меню открываетса оно попадает под нижнию,тоесть переводиш курсор оно канешно скрываетса!вопрос в том как засунуть вертикалную под горизонт!
просто раздвинуть менюшки. Например, опустить вертикальное, или подвинуть горизонтальное или сместить всплывающий пункт. По другому не получится. Там используется такое вот свойство - когда пункт меню получает фокус (т.е. в его поле попадает курсор) всплывает второй уровень (точкой, в которую всплывает второй уровень можно управлять, выше написано как это делать). Ничего с этим не сделаешь, точнее, игра просто не стоит свеч.
А вообще, юзер, скорее всего, офигеет от такой страницы, где все всплывает, скорее всего еще и баннеры мигают.... :) В общем- елка новогодняя ! :) Подумай на эту тему. Я не издеваюсь, просто представил себе это :))))))
да не нащот банеров это слишком!а так как обеснить!даже не знаю!
вопщем есть шапка сайта!ниже меню горизотальное!ниже в даный момент находитса 2 таблицы(но я хочу зделать 3)так вот как поставить вертикалку с лева чтобы верхнее меню при открытие закрывала нижнею!
просто если так зделать как на меня юзеру будет намного проще найти то что он хочет а не ходить по страницам!а нащот издевательства,я юмор понимаю,да и критику люблю!
А ты не думал, что вместо левого меню можно сделать на странице еще одну менюшку, только для страницы, которая будет работать только на странице? (это называется якорь) Это вверху страницы, а внизу добавить еще якорь "наверх". И броди себе по странице как хочешь. Ну, это если я правильно тебя понял...
Я честно не очень понял нащот якоря.Вернее в общих чертах но не полностью.Просто никогда не сталкивалса с этим термином.Но если всетаки так как я понял то это когда я нажму на ссылку обо мне то на странице я перескакиваю на этот абзац.Тогда нет.Простую менюшку,тут наверху есть ссылка(смотрим что получаетса)вот гдето также.Но я думаю если не удастца поднять горизонталку сверху,просто опущу ниже вертикалку.
Ну.... дело хозяйское
Добрый день.
Простите, не совсем по теме , но при использовании горизонтального меню на CSS появилась проблемка: при наведении мышью на пункты горизонтального меню исчезает вертикальное и весь текст на странице, но если нажать на пункт, перейти на другую страницу и успеть перевести мышь ниже то всё остаётся на месте. Что это может быть?
Добрый день.
Простите, не совсем по теме , но при использовании горизонтального меню на CSS появилась проблемка: при наведении мышью на пункты горизонтального меню исчезает вертикальное и весь текст на странице, но если нажать на пункт, перейти на другую страницу и успеть перевести мышь ниже то всё остаётся на месте. Что это может быть?
Это может быть ошибка в верстке. Какая, второй вопрос. Как только ты позволишь себе конкретизировать эту ошибку, сразу поймешь сам как ее исправить.
Ведь никому на самом деле не известно, где у тебя горизонтальное меню, где вертикальное....
Спасибо огромное, поставил меню у себя на сайте, переделал его дизайн и теперь оно просто супер! Я в CSS еще не очень разбираюсь, только самое простое. Картинки вставить не проблема, но вот механизм работы этого меню я бы сам никогда не сделал.
Еще раз спасибо, классный сайт, admin, так держать!
Доброго времени суток. У меня возникли проблемы с выводом ссылок меню в php, выводится только первая запись из базы, остальные не отображаются. Скрипт прикрутил.
Зарнее благодарен!
Вот код.
<?
$result1 = mysql_query ("SELECT id, title from uslugiul",$db);
$myrow1 = mysql_fetch_array($result1);
do { printf ("
",
$myrow1 ["id"], $myrow1 ["title"]);}
while ($myrow1 = mysql_fetch_array($result1));
?>
Здравствуйте)
Я если честно вообще не разбираюсь ни в КСС ни в Ява ни в прочих...
Хотелось бы узнать а как добавить ваше меню так чтобы оно выпадало из МОЕЙ кнопки
примерно вот так.
http://www.fotolinker.ru/show-image.php?id=93499608229ab8266b355a08b43bfe3d
есть у меня мысль
меню не работает изза того что кнопка "О нас" включена во флэш меню или ява меню (я не знаю)и 2 скрипта ругаются меж собой в иттоге чего получается:
было
http://www.fotolinker.ru/show-image.php?id=a152a769f86ec8f5caf60f409d2ed2fe
стало
http://www.fotolinker.ru/show-image.php?id=c508c1ccbd2bb1acbed7dbd9925cf36d
помогите пожалуйста очень нужно.
буду ждать ответа на мыло.
Вроде понятно, но не разберусь.
должно быть так:???
Страница с меню (там где код раскрывающегося меню)
и четыре файла:
1 cssmenustyles.css
2 vertcssmenustyles.css
3 cssmenujs.js
4 vertcssmenujs.js
Так?
Все делаю
но не получается..... (((
Спасибо!
ПАСИБО!!!!!! Очень понравилась штучка :) и очень помогла :)
есть вопрос , кто знает как правильно прописать горизонтальное меню раскрывающееся вверх....!!!???
одно меню (верхнее над шапкой) у меня раскрывается вниз ,
а второе (нижнее под шапкой) хочу чтобы вверх???
если у кого-то уже была такая идея поделись, заранее спасибо!!!!
Статья классная. Спасибо. Хотелось узнать, если я хочу, чтобы при наведении на второе меню, открывались ссылки третьего. Это возможно или нет? Что нужно прописать в коде? Спасибо.
посмотри на код второго меню, сделай по аналогии третье, и так далее, только незабудь в конце поставить
---------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------
{посмотри на код второго меню, сделай по аналогии третье, и так далее, только незабудь в конце поставить
---------------------------------------------------------------------------------------------------------
}
---------------------------------------------------------------------------------------------------------
Почему когда я жму ссылку в письме чтобы не получать больше письма, они всё равно приходят?
Аналогичный вопрос
я имел в виду, чтобы третий ряд ссылки так же менял цвет при наведении на него мышкой цветом, а то с первым рядом и вторым ок, а третий уже нет
Добрый день!
Интересен такой момент, а возможно ли сделать такое меню, открывающимся при наведении курсора?
И что бы было ввиде гармошки?
Заранее спасибо.
можно конечно, причем можно сделать так, что браузер сам будет играть на этой гармошке.... только причем здесь эта статья? Она ведь посвящена совсем другому
Здравствуйте.Помогите пожалуйста.Поставил JS код для корректности отображения в IE меню не открывается.Может в коде что-то надо изменить.В мозиле и хром все нормально.В каком месте надо вставить код?С уважением
Извините за глупый преглупый вопрос...надо сделать вертикальное выпадающее меню между какими тегами его вставлять????
Хочу предложить вариант красивого меню на ксс без использования изображений, но без поддержки ИЕ, так что кому это не столь важно:
http://webdevel.pp.ua/archives/36
http://webdevel.pp.ua/archives/36
Помогите, не получается сделать меню выпадающее вверх путем
добавляю и все равно ничего не меняется. я правильно понимаю, что добавлять надо в конце следующего кода
В ИЕ все равно отображается не корректно.
Три пункта первого уровня отображается не списком, а 2 ссылки на одной строчке, следующая на другой. При этом выпадающий список не сохраняет ширину, так сказать по длине названия с сохранением падинга и мэрнинга, и получается не ровно, плюс теже ссылки с длинным названием отображаются с переносом слов по строкам, и последнее слишком далеко от родительсих ссылок, ну это вытекает из ранее сказанного.
Может я не туда воткнул js?
Сначала в отдельный файл, с названием, обращение к которому осуществляется через тег скрипт, потом переложил этот файл в отдельную папку сохраняя путь в обращении, не работает!
Последний вариант был - расположение кода js между <скрипт тип="текст/яваскрипт"><закрыли скрипт> прямо в файле с меню.
Вот че не правильно сделал не пойму.
Я изменял код, но для проверки скопировал исходный - таже хрень.
И еще один вопрос, у меня два выпадающих меню - горизонтальное, в хедере, и вертикальное в правом сайд баре.
В чем суть - в верхнем некоторые дочерние списки достаточно длинные, и они налезают на вторую менюшку, и если курсор вести по правому краю списка и дойти до второй менюшки, которая почему то поверх первой, первую выбивает.
Может знаете как сделать, у мя тот же прикол был с ратингом новостей, промучившись пару месяцев я просто забил и удалил его, а здесь мне оное нужно.
Админ, пожалуйста помогите с горизонтальным меню выпадающем вверх. Вопрос жизни и смерти.
Слава Богу, что только вверх, а не на соседнем компе...
Если у вас это вопрос жизни и смерти, значит вы зарабатываете на нем деньги. Если вы зарабатываете на нем деньги, значит вы должны знать как это сделать, или должны быть в состоянии самостоятельно разобраться как это сделать.
Еще вы должны знать, что браузер читает слева направо, сверху вниз, поэтому - если хотите плыть против течения, то и лодка должна быть соответствующая, а не как у всех... Так что дерзайте
народ кто знает, после "заезжаение" менюшки обратно - оно на долю секунды появляться опять. как избавится от этого эффекта. она появляется только в ие
У меня на сайте два выпадающих меню. Во всех браузерах работает отлично. Но в любимом ИЕ6 выпадает только первое меню, второе не выпадает. Второе работает, когда удаляю или перемещаю ниже первое. Но тогда то первое внизу не выпадает.
Подскажите пожалуйста как решить эту проблему. Как сделать, чтобы в ИЕ6 выпадали оба меню?
Буду премного благодарна! )))
Если вам это действительно надо, имею ввиду сразу два выпадающих меню на странице, то почему бы не сверстать страницу именно для вашего любимого 6-го ишачка? Другие браузеру будут игнорировать эти инструкции, а ишак, глядишь и нарисует все почти как надо...
другие браузеры...
Доброе утро :)) Спасибка за статью!
А может вот еще подскажете - как обычно проблемы с ИЕ (семерка). При переключении на другую закладку браузера, а потом обратно - меню вообще не отображается! Если нажать Ф5, то понятно появляется. При ресайзе кстати - такая же песня. Меню я конечно изрядно попеределал, плюс оно внутри кучи дивов, спанов и табличек.. но фаерфокс с оперой все прекрасно держат..
Пробовал на ресайз навешивать событие - почему-то все равно не прорисовывается..
Может подскажете чего?
Спасибо!
Ага. Спасибо! :)) Не понял что сделал, но почему-то заработало :)) при ресайзе теперь только пропадает, но это конечно неважно :)))
народ...
а всетаки... как сделать выпадающим вверх?
интересно...
хотя бы намек... или с двух уровневым примерчик... а там уже разберемся!
Спасибо!
просто интересно!!!
Если мне не изменяет память, здесь это уже обсуждалось. Не очень понятно зачем плыть против течения, но если так необходимо, есть положение контейнера по умолчанию, есть отступы по вертикали, причем они могут быть как положительными, так и отрицательными.... дерзайте!
может и обсуждалось, но как-то поверхностно... и не понятно...
я нашел решение... правда я использовал метод создания меню не с этого сайта
но может кому-то если что и понадобится, то... вот...
и так, мы имеем свойство top, отвечающее за положение нашего выпадающего блока.
так вот, я взял и поменял его на bottom...
и вуаля =)
Ну, вуаля так вуаля... осталось только запустить все это в шестом ишаке. Он славится своим особым взглядом на многие свойства :)
Мне не очень понятно одно - зачем открывать меню вверх??????
в ie 6 работает...
зачем? а затем, что если так хочет заказчик...
осталось все это дело превратить и в многоуровневое
=)
знаю, знаю... еще раскрасить вензельками, "бликающими" баннерами, динамическими картинками и все это покрасить в ярко красный цвет!
А клиенту кто-нибудь объяснил, что ситуация напоминает слова из анекдота "а теперь, со всей этой х....й, мы попробуем взлететь..."
=)
это все смешно... но дизайнер (мудила) нарисует макет, клиент увидит и будет кипятком писаться , ему мол хочется чтоб именно так было...
в жизни ведь все может быть... а лишние примочки не помешают... ведь ,пусть и не многие, но задаются этим вопросом!
немногие тихо сидят и пишут для своих сайтов меню сами.... безо всяких выпрыгивающих и пр. элементов, но зато с фиксацией позиции, чтобы юзер не путался, а с одного взгляда понимал где он....
но если клиента совершенно не интересуют пользователи, если он рисует сайт для себя, любимого, "тада канешна..." никаких проблем :)
спс.разобрался где и к чему)
подскажити пожалуйста,почему ul#cssmenu ul li a:active в опере работает а в ИЕ7 нет(?
верней li a:active
дорогие друзья. не пойму когда делаешь под под меню, оно не дает цвета. и под под меню получается просто белым . где и что я неправильно делаю. кто нибудь дайте код как доработать этот код для под под меню, и под под под меню, чтоб корректно работал.
у меня выглядит так, но не хочет работать.
дорогие друзья. не пойму когда делаешь под под меню, оно не дает цвета. и под под меню получается просто белым . где и что я неправильно делаю. кто нибудь дайте код как доработать этот код для под под меню, и под под под меню, чтоб корректно работал.
у меня выглядит так, но не хочет работать.
/**/
/**/
дорогие друзья. не пойму когда делаешь под под меню, оно не дает цвета. и под под меню получается просто белым . где и что я неправильно делаю. кто нибудь дайте код как доработать этот код для под под меню, и под под под меню, чтоб корректно работал.
у меня выглядит так, но не хочет работать.
Представленный здесь код рассчитан только на два уровня меню,
Спасибо за меню!
Подскажите пожалуйста вот только...
1 - как при наведении на кнопку, из которой будет все вылезать, заставить её окрасится в красный свет? после внедрения меню мой css ный
a:link {text-decoration: none;}
a:hover {text-decoration: none; color: red;}
перестал работать на эти кнопки
2 - в IE 6 ом, с первой кнопкой из 2 в меню все в порядке, а во второй не раскрывается список..какие только мелочи не менял
m155.tumand.ru/test/test.html
специально вставил css файл в хидер, чтобы было понятнее
заранее благодарю!
Юлия! у меня такая же ошибка была как у вас похоже (см.выше ))
я справился с ней так
дублируем код меню css но заменяем название например с navmenu-v на navmenu_number2-v
и второму списку присвавим значение navmenu_number2-v
также копируйте в js скрипте созданную авторами функцию и заменяете там navmenu-v на navmenu_number2-v, т.е. получится 2 функции, и так можно до нужных пределов
У меня вопрос по поводу вертикального меню.
Как заставить его открыватся не в лево а в право ?
Прошу прощения, наоборот не вправо, а ввлево???
{Гость
06.06.2009
Как эту всю красоту с php реализовать, кто пробовал?
admin
06.06.2009
Гость
Я пробовал, не вижу проблем, что вас смущает?}
меня смущает! я вывед через echo""; и заменил все " на \" после этого меню не убирается обратно, а в IE сдвигается правее
http://3wforums.ru/uploads/monthly_07_2010/post-11339-1278927921,6986_th...
^
|
L это в опере
ответить просьба тут
http://3wforums.ru/topic/6459-css-menju-ne-vipadet-v-ie/page__pid__28711...
а при чем тут PHP? Таблицу стилей ковырять надо
{а при чем тут PHP? Таблицу стилей ковырять надо}
но почему-то без РНР все работает!
ну, вообще-то, подобное меню на РНР юзает совсем другие стили (потому что РНР дает возможность использовать совсем другой алгоритм отображения), да и заморачиваться с РНР будет иметь смысл если есть необходимость изменить поведение меню в зависимости от УРЛа например.... а так, только ради того чтобы просто сказать - у меня меню на РНР. Зачем? Оно и так прекрасно работает. Заверни его целиком в файл и вызывай с помощью РНР.
ну я уже вызвал, но всё равно, в IE съезжает вправо...
что сказать... если без РНР работает, а с РНР едет вправо, причем только в ИЕ, напрашивается один вывод - чудеса!
Отдельно для ИЕ прописать стили не пробовал?
а....не не съезжает уже....при наведении на "Горизонтальное" на месте горизонтального высвечивается "Ссылка 1"!
чудеса, потому что PHP исполняется на сервере, а не у клиента, а значит ему все равно какой браузер. Косяк может быть где-то в выводе, в РНР, но тогда он должен проявляться в любом браузере одинаково
исполняется то он на сервере, но результат браузер может отображать по-разному...
уже не съезжает? динамично однако...
а что должно высвечиваться?
оно, часом, не запаковано у тебя в еще один контейнер?
конечно, но тут не мешало бы вспомнить о том, что браузер получает готовый исходный код. Потому я и написал в самом начале - ковыряй стили
нет, в таблицу...
вот тебе и разница. Думаю, здесь и надо копать
Спасибо за урок, единственный вопрос как поставить разделитель между пунктами в горизонтальном меню т.е так:
Горизонтальное | CSS | Меню
Здравствуйте! Спасибо за меню, долго разбирался, как всю эту красоту приспособить к своему сайту. в принципе все получилось, но есть вопрос: у меня названия ссылок длинные и поэтому они переносятся на другую строку, т.е. ссылка получается в 2-е строчки интервал между этими строками судя по всему - полуторный, можно ли как-то уменьшить интервал до одинарного? чтобы сама ссылка выглядела компактнее. редактирование самого списка в html файле ничего не дало. подозреваю что это можно сделать с помощью параметра line-height в css файле, но где его нужно применить ни как не пойму.
спасибо
хочу поблагодарить автора - спасибо!
Сделал у себя вертикальную - все ОК. Во всех доступных браузерах работает и без скриптов.
спасибо, попробуем
автор, спасибо за код. только вот непонятка: у меня меню располагается вертикально:
Как мне сделать смещение "Раздел2" при открывании "Раздел1" т.е.т.е. что бы список ссылок открывался смещая "Раздел2" и располагался м/д "Раздел1" и "Раздел2", сейчас у меня список ссылок "Раздела1" открываются после "Раздела2", т.е. "Раздел2" закрывает собой "Ссылка"
Понятно объяснил суть вопроса? Помогите пожалуйста!!! ;cry
нужна помощь
как сделать чтобы меню выподало не только просто в низ, а разпологалась под полоской меню тоже в горезонтальном направление? (речь о горизонтальном меню)
display: inline; - клево! только не пойму куда его вставить, чтобы работало. куча вариант перепробовал - не рабоатет((
Очень просто. Сейчас расскажу.
Надо очень внимательно рассмотреть код, потом пройти его пешком, не помешает также вспомнить о свойствах списков и посмотреть код меню-закладок (меню на табах или с помощью табов)
Все станет предельно ясно. Легко сделать подобное меню, которое будет юзать РНР, работать вообще без java, причем во всех браузерах. К тому же еще будет показывать к какому пункту меню относится открытая страница.
Вам кажется что это сложно? Скажу так - Шумахер и компания, прежде чем промчаться по хорошо знакомой трассе в болиде, проходят ее пешком от начала до конца.....
спасибо! правда, вы ничем не помогли мне(
ни в какую не видит он этот inline даже с !important )
как хотите....
у вас есть прекрасная возможность понять, что сайты делаются не так быстро, как потом работают.
и если вы хотите чему то научиться, придется тратить время и самому искать ответы.
я вовсе не издеваюсь, просто сам хожу пешком по коду
бывают случаи, когда есть время и желание разбираться в коде
а бывают случаи, когда нужно срочно что-то сделать и ни времени, ни желания разбираться нет
я лишь просил написать, как сделать так, чтобы работало, как надо
мда. Код, кстати, стопроцентно рабочий!
скажу вам так - для зрителей гонки потеха, для гонщиков - тяжелый труд, во всех случаях!
Доброго времени суток! у меня такой вопросик: есть сраница, состоит из таблиц. Как выровнят меню по правому краю ячейки?(align не пашет). Спасибо
вы сами ответили на свой вопрос.
у вас таблицы, а в таблицах работает все, но немного не так как в таблицах стилей....попробуйте метод тыка, легко найдете зависимость, или почитайте матчасть
http://www.chat-rid.ru/ спасибо ....очень доступный сайт в понимании.
Здравствуйте!!!Скажите пожалуйста почему в IE в горизонтальном меню после каждой строчки вставляется пустая строка? в остальных браузерах все нормально.
статья классная, но у меня почему то не корректно меню отображается(
Как сделать вертикальное меню по центру??
Я еще плохо разбираюсь в CSS((
Огромное спасибо за статью. Вопрос есть. Пунктов второго уровня в вертикальном меню очень много, не входят в экран. Можно ли сделать скроллинг внутри вертикального меню? Если да, подскажите, пожалуйста, как именно. Спасибо ещё раз.
И как вы себе представляете скроллинг в меню? Может стоит подумать над тем, как уменьшить кол-во пунктов в меню? Пожалейте своих посетителей
Если бы представлял, не спрашивал бы ) Вы тоже не знаете, как это сделать?
Почему не знаю? Знаю - взять и сделать :) Причем я не шучу, способов существует очень много, просто опять же - не ясно зачем это делать. Есть уже какие то традиции верстки, есть, в конце концов, здравый смысл, который диктует меню сайта как указатель разделов, а уже в разделе можно сделать свое собственное меню.
Вы бы лучше подумали о том, как указать пользователю какая страница в данный момент открыта. Это меню не поддерживает такую фичу. Да, собственно, ни одно из универсальных меню не обладает такой способностью, поскольку не подключено к сайту, а просто прикручено сверху.
Но, если вы считаете, что в вашем меню обязательно должен быть скроллинг, подумайте как это сделать
Я тоже знаю ) Кое-что. Например, многие считают, что говорить абстрактно и загадками (то есть не по делу и без конкретики) - есть признак большого ума и огромной эрудиции ) Похоже, одна надежда на админа. Вдруг заглянет...
вы, уважаемый, даже не представляете, насколько конкретен и по делу мой ответ. А поймете вы это, когда сделаете таки скроллинг, а после поймете что он вам совершенно не нужен.... :)
Ахаха! Насмешил.
Ты тормоз?
внимание вопрос - а куда ява скрипт засовывать ????
и как во всех браузерах его отобразить нормально ??
Внимание ответ - вам не стоит заниматься сайтостроением....
Очень просто - поиграть с таблицей стилей, после этого нормально отображается во всех браузерах
что нужно дописать в css вертикального и горизонтального для добавления ещё трех уровней вложенности?
спасибо автору!
Спасибо!
Седня целый день мучался пока вашу страничку не нашел!
Спасибо!
Просто супер...
пожалуйста подскажите...нужно сделать меню на подобие вашего + php, чтобы на определенном урл определенное меню или подменю оставалось раскрытым, спасибо.
Меню простое и со вкусом. Спасибо автору. Только у меня такая проблема: меню отображается корректно только в хроме. В лисе и опере - в виде обычного списка. Это уже второе подобное меню, которое нормально отображается только в хроме. Скажите, в чём может быть причина?
Спасибо классные менюшки
Долго искал, нашёл. Щас пойду устанавливать, если нормально-отпишусь.
Всё нормально получилось. Спасибо
А подскажите новичку, куда вставлять все эти файлы на сайт? – разметку, стили? Изначально у меня на сайте верстка табличная, как это с css срастить? помогите пожалуйста! я уже третий день борюсь!
А как положить кулек с продуктами в сумку, в которой уже лежит компьютер? Вызывает затруднения? Здесь точно такой же принцип :)
:)ну и все таки - это не сумка с компом и подход к этому я найти не магу ! я работаю как на отдельных самостоятельных скриптах так и на друпале - но установить во обоих случаях так и не получилось!
не могу понять в чем дело - ведь все делаю по инструкции (как мастер прописал)!
Все работает нормально супер еще раз спасибо!
Заходите посмотреть!
http://ed-wilson.narod.ru/
Все работает нормально супер еще раз спасибо!
Заходите посмотреть!
http://ed-wilson.narod.ru/
в explorer не работает
oldor...
Не знаю, что у вас у меня explorer8 отлично все работает...
Но так, как explorer не самый популярный браузер, или вернее сказать-самый не популярный браузер - то этот процент можно откинуть, как не влияющий на основную массу...
В любом случае спасибо, что не поленились зайти!
Люди. Внимательно устанавливайте и всё будет работать. Терпенье и труд всё перетрут.
Господа Гуру сайтостроения, подскажите: как сделать так, чтобы в выпадающем меню (на втором уровне) цвет фона был иной, чем у основного меню? То есть, например цвет фона основного меню - синий (как в уроке), а в выпадающем подменю - цвет фона должен быть, например, голубой. Подскажите, как так сделать. Заранее спасибо!
Умело!! сейчас у себя реализую!
Такая проблема в вертикальном меню если слишком длинное название в ІЕ не отображаеться а в опере все работает
У меня такая проблема - делаю я ща сайт в шапке сайте зделал таблицу
1 строка 1 столбец там картинка и т.п.
и 2 строка 5 столбцов (это типо меню)
в каждой картинка хочу зделать выпадающее меню на первых 2 картинках
они в разных столбцах т.е. надо делать 2 меню
так вот 1 меню делаю все ок и в EI пашет ,но вот 2 меню в EI не пашет
пытался линковать 2 ксс таблицы писал каждому айди свое но 2 меню не выпадает (
Помогите уже все излазил не могу не че зделать
вот эти 2 столбца
beginer
08.02.2011
Господа Гуру сайтостроения, подскажите: как сделать так, чтобы в выпадающем меню (на втором уровне) цвет фона был иной, чем у основного меню? То есть, например цвет фона основного меню - синий (как в уроке), а в выпадающем подменю - цвет фона должен быть, например, голубой. Подскажите, как так сделать. Заранее спасибо!
Обращайся напрямую к нужному контейнеру сохраняя иерархию, пример есть структура меню такая
нужно заменить цвет выпадающего подменю пишем в стилях
ul li ul
{
color: #555555;
}
надо сделать выпадающее меню выпадающего меню пишем
ul li ul li ul
{
color: #555555;
}
так же если у вас есть id то можно напрямую обращаться по id или строить иерархию от данного id или класса.
В примере показан принцип, а не рабочая меню)
Помогите пожалуйста! Проблема такова: в ИЕ работает отлично а вот в опере, мозилле, Google Chrome вместо горизонтального (полоски) отображается
вертикальное (колонка). Саму менюшку вставил в хтмл таблицу с <див центр>
Вроде разобрался. Но теперь не могу разместить меню по центру. Может кто-то подскажет что можно сделать.
савсем ещё новичек. Помогите плиз, не знаю куда необходимо вписать css код меню. Как это правильно сделать
Просто добавить в тот файл, где уже лежат остальные стили. Если стили описаны непосредственно на странице - то приписать новые рядом с уже существующими
спасибо!
Давно искал такое меню для ucoz, но у всех примеров проблема - не работают в IE. Поставил этот - все отлично, спасибо!
Спасибо большое, всё везде замечательно работает, но обнаружилось следующее... если переходишь по ссылке в меню и потом жмешь на мышке кнопку назад, то назад конечно переходит, но при этом список(2-ой уровень меню из которого переходил) остается в меню выпавшим и не убирается. Помогите пожалуйста с этим справиться :))
я использовал анимированное слайдшоу и сверху поставил выпадающее меню, проблема в том что анимация закрывает выпадающее меню,если убрать позирование relactive в id=window и в class=slideshow,то выпадающий список становиться поверх фото,но анимация перестает функционировать. скажите плиз, как решить проблему.
вот ссылка http://vibor-kzn.ru/menu/
исходные данные http://vibor-kzn.ru/menu.zip
Здравствуйте.
Как правильно подключить JavaScript?
Я создал файл JS, в HTML подключил его таким образом:
- это правильно?
Меню работает в Mozilla Firefox, Opera, Safari, а вот в IE не работает, помагите пожалуйста.
Открыть исходный код любой страницы и посмотреть как там подключены JS файлы
Спасибо, у меня все получилось была нелепая ошибка.
как оформить задержку меню?
спасибо. помогло чутка понять.
Но жалко, что активный пункт меню не обозначен.
Кого интересует как активный пункт меню выделить
без java можно найти тут http://phpcss.ru/d_v_menu_php.php
Интересная реализация, только количество стилей можно и сократить, для простого меню их чересчур много.
Спасибо. Всё хорошо. Но есть один вопрос. В вашем примере приведено 3 главных меню: "Горизонтальное", "CSS", "Меню". Добавляю ещё 2 и они у меня опускаются под первые три, а мне нужно, чтобы они все были в одну строчку - горизонтально. Подскажите, что нужно сделать???
Народ, очень нужна помощь откорректировать меню. С css идея классная,собираю структуру divами, вставляю предложенный вариант, изменения ввел только в фиксации и расположении блока - в результате полторы ссылки...:-(
Идея такая: сделать первое меню (горизонтальное, распределенное)в одном фиксированном блоке, второе (подменю)-в таком же блоке под ним.
Буду благодарен за терпение. Могу выслать на e-mail файлы для проверки.
Народ! Подскажите как корректно сделать выпадание этого меню вверх?
Честно просмотрела все коменты - никакого решения там нету, хотя это вопрос многих волновал.
Чтобы выпадало вверх - это просто. Всего лишь надо задать нижний край выподающего окна, вместо верхнего.
ul#cssmenu ul { ...
bottom: 20px;
...}
Есть страница с четырехуровневым меню
глава 1.
пункт 1.
подпункт 1.
подподпункт 1.
подподпункт 2.
пункт 2.
подпункт 1.
подподпункт 1.
подподпункт 2.
глава 2.
пункт 1.
подпункт 1.
подподпункт 1.
и т.д.
Необходимо, чтобы при открытии страницы по умолчанию открывались первых два уровня, а остальные только по клику. И чтобы это одинаково правильно работало в Мозилле, Oпере и IE
глава 1.
пункт 1.
пункт 2.
глава 2.
пункт 1.
Прописал в стиле:
li.close-item > ul {display:none;}
li.open-item > ul {display:block;}
В скрипте:
function mtoogle(oThis)
{
if (oThis.parentNode.className == 'open-item')
oThis.parentNode.className = 'close-item';
else
oThis.parentNode.className = 'open-item';
return false;
}
для li прописал class="close-item"
для a - onclick="mtoogle(this); return false;
В Опере и Мозилле все работает, в IE (у меня 9) - нет
Посоветуйте что-нибудь?
очень мало уровней в вашем меню, надо довести хотя бы до четырех по умолчанию и десяти по клику. Тогда все будет гуд :)
Типа пошутил, да?
Типа пошутил, да?
Типа пошутил, да?
типа нет. просто взгляни на свое меню по другому. какое отношение к нему имеют пункты, которые постоянно загружаются? они рядом стоят?
Интересная реакция. Может, я вопросы неправильно формулирую?
Я не про пункты спрашиваю, а почему страница в мозилле отражается свернутой (как и требуется), а в эксплорере нет. Может, для эксплорера дополнительно что-то прописывать надо?
а как это меню разместить по центру окна?