Горизонтальное выпадающее CSS-меню
Есть меню. Например как здесь: http://solardreamstudios.com/_img/learn/css/cssmenus/index-horiz.html
Выпадает, правда, всего один уровень, без всяких заморочек с выделением и т.д. Просто текст.
Нужно сделать возможным выпадание над основным блоком, а не под него. Причем высота выпадающего меню может быть разная.
Вариант прописать классы для каждого не подходит. Необходимо универсальное решение.
Выпадает, правда, всего один уровень, без всяких заморочек с выделением и т.д. Просто текст.
Нужно сделать возможным выпадание над основным блоком, а не под него. Причем высота выпадающего меню может быть разная.
Вариант прописать классы для каждого не подходит. Необходимо универсальное решение.
И что я должен был там нового увидеть? Вы сабж читали?
Вот мне интересно - кто-нить прочел то что мне нужно, прежде чем ссылками забрасывать :confused:
Цитата: cogonet
Вот мне интересно - кто-нить прочел то что мне нужно, прежде чем ссылками забрасывать :confused:
Если ты думал, что тебе сейчас бросяться писать готовый скрипт, то ошибаешься. За тебя твою работу ни кто делать не будет.
"Не умеешь работать головой - работай кошельком))"
Приведенных линков должно хвать, что бы поработать головой. Не работает голова? См. выше. ;)
Уважаемый alekciy, приведенные выше примеры я видел не однократно, и решения моей проблемы там нет (буду очень признателен если докажете обратное). В форум пишу только после того, как сам перепробую все известные (и не известные) мне варианты.
Готовый (тем более СКРИПТ) мне не нужен - достаточно просто идеи, или намека на решение.
Я так думаю что моя проблема Вам тоже не известна, и Вы лишь прокомментировали последний меседж. Очень жаль, что Вы сами сначала не попробовали подумать головой, прежде чем наезжать на человека.
Если не знаете решения - так и скажите, или лучше промолчите - потому что бесполезный офтоп никому не нужен.
Готовый (тем более СКРИПТ) мне не нужен - достаточно просто идеи, или намека на решение.
Я так думаю что моя проблема Вам тоже не известна, и Вы лишь прокомментировали последний меседж. Очень жаль, что Вы сами сначала не попробовали подумать головой, прежде чем наезжать на человека.
Если не знаете решения - так и скажите, или лучше промолчите - потому что бесполезный офтоп никому не нужен.
Бесполезным офтопом тут занимаешься ты. Я вот знаю, что если мне такая задача припрет, то я то напишу такое меню. Но естественно что бы доказать это я писать ни чего не буду, так что даже не пытайся поймать ;)
И потом... ты сам привел готовое решение. Кстати там не один уровень, а два. И выделение есть. И чем по твоему выпадение списка вниз отличается от выпадени вверх? Можешь в mootools поискать: http://demos.mootools.net/Fx.Slide
И потом... ты сам привел готовое решение. Кстати там не один уровень, а два. И выделение есть. И чем по твоему выпадение списка вниз отличается от выпадени вверх? Можешь в mootools поискать: http://demos.mootools.net/Fx.Slide
2alekciy Мне кажется немного не о том хотят спросить.
Если ты можешь позиционировать рядом, то минусовой поднимет его к верху (не пробывал, голая теория), а высоту блока можно узнать через JS (умнее в пол первого ночи ничего не приходит) и собсно на эту высоту поднять. Это если я правильно понял суть вопроса, если не правильно, то лучше задай по другому, т.к. если несколько человек подумало одинаково, то стоит задуматься о правильности вопроса.
Если ты можешь позиционировать рядом, то минусовой поднимет его к верху (не пробывал, голая теория), а высоту блока можно узнать через JS (умнее в пол первого ночи ничего не приходит) и собсно на эту высоту поднять. Это если я правильно понял суть вопроса, если не правильно, то лучше задай по другому, т.к. если несколько человек подумало одинаково, то стоит задуматься о правильности вопроса.
Цитата:
Но естественно что бы доказать это я писать ни чего не буду
А зря ;)
shaelf - всё вы правильно поняли. А решение с JS - единственное которое мне вообще приходит в голову. Хотелось узнать можно ли это реализовать чистым CSS. Видать нет :(
cogonet, если верно понимаю задачу, то надо просто прописать z-index , для блоков, т.е. присвоить z-index родительскому для обоих, родительским для каждого из них и им самим.
А узнать высоту этого блока можно банально, не делать его не видимым, а наоборот, сделать видимым, но присвоить
Т.е. пока ты не присвоишь блоку свойство left:0; его никто не увидит (он будет вынесен фиг знает куда), а вот скрипт всегда сможет получить все его свойства (т.к. в объектной модели документа блок то присутствует). Только еще родительскому присвой:
Хотя, может я не верно понял задачу?
А узнать высоту этого блока можно банально, не делать его не видимым, а наоборот, сделать видимым, но присвоить
Код:
position:absolute;top:0;left:-10000px
Т.е. пока ты не присвоишь блоку свойство left:0; его никто не увидит (он будет вынесен фиг знает куда), а вот скрипт всегда сможет получить все его свойства (т.к. в объектной модели документа блок то присутствует). Только еще родительскому присвой:
Код:
position: relative;
Хотя, может я не верно понял задачу?
Блин, видать действительно надо выражатся яснее :)
Попробую еще раз:
Пример не работает в IE!
Как вы видите, для выпадающего <ul> явно задан отрицательный margin который естественно должен быть разный для каждого. Решить задачу можно прописав кажому свой class - но это не выход при динамически создаваемом меню (скажем так - плохой выход).
Все что мне хотелось узнать - можно ли данную задачу решить без использования JS и если да - то было бы интересно узнать хотя бы приблизительно каким образом.
Прошу прощение у всех - кого изначально ввел в заблуждение. Обещаю исправится ;)
Попробую еще раз:
Код:
<html>
<title>menu</title>
<head>
<style type="text/css">
#nav{
margin:100px;
}
#nav, #nav UL {
padding:0;
text-align:center;
list-style:none;
}
#nav UL {
text-align:center;
}
#nav A {
padding:0 5px 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
}
#nav ul li A {
display:list-item;
font:bold 11px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
}
#nav LI {
float:left;
margin-right:15px;
}
#nav LI:hover,
#nav LI.sfhover {
color:#FFF;
}
#nav LI UL {
position:absolute;
top:-999em;
margin-top:-85px;
width:100px;
}
#nav .activeCircle{
display:inline;
padding-left:15px;
}
#nav LI UL .activeSquare{
display:inline;
padding-left:10px;
}
#nav LI LI {
padding-right:1em;
}
#nav LI UL A {
width:150px;
text-align:left;
font-size:10px;
margin:0; padding:0;
}
#nav LI UL LI {
display:inline;
padding-left:10px;
}
#nav LI:hover UL UL,
#nav LI.sfhover UL UL,
#nav LI:hover UL UL UL,
#nav LI.sfhover UL UL UL {
top:-999em;
}
#nav LI:hover UL,
#nav LI.sfhover UL,
#nav LI LI:hover UL,
#nav LI LI.sfhover UL,
#nav LI LI LI:hover UL,
#nav LI LI LI.sfhover UL {
top:auto;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">element1</a></li>
<li><a href="#">element2</a>
<ul>
<li><a href="#">element 2.1</a></li>
<li><a href="#">element 2.2</a></li>
<li><a href="#">element 2.3</a></li>
<li><a href="#">element 2.4</a></li>
<li><a href="#">element 2.5</a></li>
<li><a href="#">element 2.6</a></li>
</ul>
</li>
<li><a href="#">element3</a>
<ul>
<li><a href="#">element 3.1</a></li>
<li><a href="#">element 3.2</a></li>
</ul>
</li>
<li><a href="#">element4</a></li>
<li><a href="#">element5</a></li>
<li><a href="#">element6</a></li>
<li><a href="#">element7</a></li>
</ul>
</body>
</html>
<title>menu</title>
<head>
<style type="text/css">
#nav{
margin:100px;
}
#nav, #nav UL {
padding:0;
text-align:center;
list-style:none;
}
#nav UL {
text-align:center;
}
#nav A {
padding:0 5px 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
}
#nav ul li A {
display:list-item;
font:bold 11px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
}
#nav LI {
float:left;
margin-right:15px;
}
#nav LI:hover,
#nav LI.sfhover {
color:#FFF;
}
#nav LI UL {
position:absolute;
top:-999em;
margin-top:-85px;
width:100px;
}
#nav .activeCircle{
display:inline;
padding-left:15px;
}
#nav LI UL .activeSquare{
display:inline;
padding-left:10px;
}
#nav LI LI {
padding-right:1em;
}
#nav LI UL A {
width:150px;
text-align:left;
font-size:10px;
margin:0; padding:0;
}
#nav LI UL LI {
display:inline;
padding-left:10px;
}
#nav LI:hover UL UL,
#nav LI.sfhover UL UL,
#nav LI:hover UL UL UL,
#nav LI.sfhover UL UL UL {
top:-999em;
}
#nav LI:hover UL,
#nav LI.sfhover UL,
#nav LI LI:hover UL,
#nav LI LI.sfhover UL,
#nav LI LI LI:hover UL,
#nav LI LI LI.sfhover UL {
top:auto;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">element1</a></li>
<li><a href="#">element2</a>
<ul>
<li><a href="#">element 2.1</a></li>
<li><a href="#">element 2.2</a></li>
<li><a href="#">element 2.3</a></li>
<li><a href="#">element 2.4</a></li>
<li><a href="#">element 2.5</a></li>
<li><a href="#">element 2.6</a></li>
</ul>
</li>
<li><a href="#">element3</a>
<ul>
<li><a href="#">element 3.1</a></li>
<li><a href="#">element 3.2</a></li>
</ul>
</li>
<li><a href="#">element4</a></li>
<li><a href="#">element5</a></li>
<li><a href="#">element6</a></li>
<li><a href="#">element7</a></li>
</ul>
</body>
</html>
Пример не работает в IE!
Как вы видите, для выпадающего <ul> явно задан отрицательный margin который естественно должен быть разный для каждого. Решить задачу можно прописав кажому свой class - но это не выход при динамически создаваемом меню (скажем так - плохой выход).
Все что мне хотелось узнать - можно ли данную задачу решить без использования JS и если да - то было бы интересно узнать хотя бы приблизительно каким образом.
Прошу прощение у всех - кого изначально ввел в заблуждение. Обещаю исправится ;)
Цитата: cogonet
А зря ;)
О хо-хох... тебе лень подумать, а мне значит нет? :)
Цитата: cogonet
shaelf - всё вы правильно поняли. А решение с JS - единственное которое мне вообще приходит в голову. Хотелось узнать можно ли это реализовать чистым CSS. Видать нет :(
А смысл только средствам CSS? Для IE все равно для приведенного тобою примера требует JS.
А для нормальных браузеров реализовать можно. Не претендую на универсальность, однако немного подумав сделал вот так http://alekciy.ru/index-horiz.html . Если пошамать еще думаю можно придумать что-то и поизящнее. Думай сам ;) .
Цитата: cogonet
Блин, видать действительно надо выражатся яснее :)
Попробую еще раз:
Попробую еще раз:
Ого! Да ты времени не теряешь. Что ж, можно только похвалить.
Цитата: cogonet
Пример не работает в IE!
Правильно. В приведенном тобою линке эту проблему обходят через JS скрипт. Как понимаю средствам CSS это пофиксить нельзя, все дело в кривости IE. Ну осел на то и осел...
Цитата:
Ого! Да ты времени не теряешь. Что ж, можно только похвалить.
А ты думал ;) Но похвалы нам ненужны :)
Цитата:
Правильно. В приведенном тобою линке эту проблему обходят через JS скрипт
Да, я знаю. Не стал приводить скрипт так как для дела это не существенно.
Цитата:
А смысл только средствам CSS? Для IE все равно для приведенного тобою примера требует JS.
Возможно ты и прав. Лана, будем шаманить на скриптах.
Всем спасибо за участие!
Что, мой вариант не понравился? :D