Jump to content
  • 0

Помогите пожалуйста


Alisa
 Share

Question

Пожалуйста, помогите переделать!

CSS код

#menu_cont ul {
font-size: 0.85em;
margin: 0;
padding: 0;
list-style: none;
}
#menu_cont li {
display: inline;
float: left;
}
#menu_cont li a {
display: block;
padding: 7px 20px;
color: #003388;
background-color: #f5f5f5;
margin-right: 2px;
}
#menu_cont li a:hover {
display: block;
padding: 7px 20px;
color: #333;
background-color: #fff;
margin-right: 2px;
}
#menu_cont li span {
display: block;
padding: 6px 20px;
color: #555;
background-color: #e8e8e8;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-right: 2px;
}

HTML код

<div id="menu_cont">
<ul>

<li><a href="#">Пункт меню 1</a></li>
<li><a href="#">Пункт меню 2</a></li>
<li><a href="#">Пункт меню 3</a></li>

<li><span>Выбранный пункт</span></li>
</ul>
</div>

Очень нужно переделать горизонтальное меню в выпадающее. Пожалуйста, помогити, безумно нужно, буду очень благодарна!

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
а давайте наоборот. вот вам работающее меню, а вы переделаете ;)

http://www.master-web.info/dropdownmenu-css-gquery/

гугл таки рулит :D

Спасибо, но начинала установку именно с этого меню...не получилось(был забавный глюк, что по первой ссылке открывалось сабменю, по второй то же, по третьей же нет; поколупавшись в коде - второе сабменю больше не опускалось...возратила все до исходного кода меню - второе по прежнему не открывалось), потом меню на java+css - но шапка полезла вверх...потом ещё был на ряд попыток, пока не на толкнулась на вот этот код - он у меня единственный встал как нужно и теперь для полного счастья не хватает, чтоб оно выпадало:)

Разьясните, пожалуйста, хоть как одно сабменю в css написать - просто хроническая неудачница по этой части дела )))

Link to comment
Share on other sites

  • 0

вы что-то путаете. в этом примере у первой ссылки вообще нет сабменю.

все, что надо сделать - это положить, куда надо, *.js файлы. прикрутить к своему css прилагаемые классы и переделать их под свои нужды,, в своем html прописать подгрузку *.js файлов.

ну и вставить код меню, переделав код из примера под себя.

Разьясните, пожалуйста, хоть как одно сабменю в css написать

вот это я не вполне поняла. в примере в js файлы вам лезть не надо. а в html и css все очень просто и наглядно.

Link to comment
Share on other sites

  • 0
вы что-то путаете. в этом примере у первой ссылки вообще нет сабменю.

все, что надо сделать - это положить, куда надо, *.js файлы. прикрутить к своему css прилагаемые классы и переделать их под свои нужды,, в своем html прописать подгрузку *.js файлов.

ну и вставить код меню, переделав код из примера под себя.

я немножко не корректно выразилась, там далее идёт статтья http://www.getincss.ru/2008/09/18/gorizont...a-na-wordpress/ - вот то, что пыталась делать сперва))

Вроде все поняла, кроме куда заливать *.js файлы. Подскажите пожалуйста, на хосте есть папка wordpress, в корень каталога их ложить или ити куда-то дальше\создавать отдельную директорию? (Очень надеюсь, что у вас есть опыт работы с Wordpress)

Link to comment
Share on other sites

  • 0
про вордпресс совсем не знаю.

вообще-то в теме стоило бы как-то обозначить, что речь о вордпрессе.

или хотя бы в первом посте.

Ну не сильно идёт отличие в wordpresse от других движков, просто не хочется java скрипты прописывать в шапке - сильно будет нагружать+ не факт, что будет корректно работать ;)

Link to comment
Share on other sites

  • 0
Мастера и специалисты PHP\HTML\CSS помогите девушке с этой не лёгкой задачей, куда нужно засунуть java скрипты в wordpress для корректной работы меню?

Дык и создайте дирректорию, например (js) в корне, там где папки wp-admin, wp-content, wp-includes.

И путь до этого скрипта будет (так как темплейт все равно подгружается в корень index.php):

/js/script.js

или:

js/script.js

З.Ы. а может вам просто на css лучше меню?

Link to comment
Share on other sites

  • 0
На одних ксс запаришься делать выпадающее меню как минимум с 3-мя уровнями вложенности. Ксс получится очень громозкий и его будет трудно контролировать.

Громоздкий? Контроллировать?

Ага, намного лучше написать нисколько не громоздкий JS код и потом совсем не контроллировать баги с разными браузерами...

Link to comment
Share on other sites

  • 0

Грамотно написаный JS код не вызывает багов ни в одном из браузеров. Я, по крайней мере, когда-то писал уже такое меню с любым уровнем вложенности. Ни один браузер мне ничего не сказал и валидацию именно это меню прошло на ура. Благо задача не такая уж и трудная. Писать же довольно объемное меню ксс способом - довольно трудоемкое дело, кроме того 100% будут ошибки которые придется буквально с микроскопом выискивать из объемного кода. Мое мнение - ксс соит применять для небольшого меню с 2-мя, максимум 3-мя уровнями вложенности, или же когда необходимо написать сайт полностью без JS.

Link to comment
Share on other sites

  • 0

Поддерживаю Ogaligа. Чисто CSSные менюхи (особенно многоуровневые) не способны состязаться с JS-вариантами не сколько даже в легкости поддержки, сколько в юзабилити. То, что при случайном промахе мимо нужного пункта четвертого уровня (к примеру) мгновенно пропадают все три уже раскрытые, на мой взгляд, никуда не годится. Нужна задержка хотя бы 0.4-0.5с (если подпункты открываются с модной сейчас анимацией, она получается как бы автоматически). А в простейшем случае (html представляет собой вложенный список, в JS используются три функции - по наезду на подменю сбросить таймер на его скрытие, по наезду на пункт показать его подменю и убрать чужие, по уходу с подменю поставить таймер на его скрытие) проблем кроссбраузерности будет в разы меньше, чем при попытке реализовать похожую функциональность на голом CSS. Как минимум, заведомо меньше хаков для того же IE понадобится.

Я искренне восхищаюсь достижениями Стью Ничолза (доказавшего, что функциональность выпадающего меню можно реализовать чистым CSS даже в IE6, пусть и с хаками) и ему подобных энтузиастов. Но рассматриваю такие примеры отчасти как демо потенциальных возможностей технологии, отчасти как увлекательные упражнения для мозга (это, кстати, не устает повторять и сам Стью в пояснениях к своим CSS-чудесам;). Для практики удобнее и надежнее прямолинейные, бесхитростные JS-решения. В т.ч. на базе модных (и потому достаточно оттестированных во всех значимых браузерах) фреймворков...

Link to comment
Share on other sites

  • 0
Поддерживаю Ogaligа. Чисто CSSные менюхи (особенно многоуровневые) не способны состязаться с JS-вариантами не сколько даже в легкости поддержки, сколько в юзабилити. То, что при случайном промахе мимо нужного пункта четвертого уровня (к примеру) мгновенно пропадают все три уже раскрытые, на мой взгляд, никуда не годится. Нужна задержка хотя бы 0.4-0.5с (если подпункты открываются с модной сейчас анимацией, она получается как бы автоматически). А в простейшем случае (html представляет собой вложенный список, в JS используются три функции - по наезду на подменю сбросить таймер на его скрытие, по наезду на пункт показать его подменю и убрать чужие, по уходу с подменю поставить таймер на его скрытие) проблем кроссбраузерности будет в разы меньше, чем при попытке реализовать похожую функциональность на голом CSS. Как минимум, заведомо меньше хаков для того же IE понадобится.

Я искренне восхищаюсь достижениями Стью Ничолза (доказавшего, что функциональность выпадающего меню можно реализовать чистым CSS даже в IE6, пусть и с хаками) и ему подобных энтузиастов. Но рассматриваю такие примеры отчасти как демо потенциальных возможностей технологии, отчасти как увлекательные упражнения для мозга (это, кстати, не устает повторять и сам Стью в пояснениях к своим CSS-чудесам:). Для практики удобнее и надежнее прямолинейные, бесхитростные JS-решения. В т.ч. на базе модных (и потому достаточно оттестированных во всех значимых браузерах) фреймворков...

Лично мое мнение. Выпадающие меню - самое неудобное, что можно себе представить. Дерево гораздо удобнее и нагляднее, а также проще, не требует много кода.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy