CSS меню из XHTML в простой HTML

maleficmax · October 31, 2007

Вот код меню, взятый с некоторого сайта.

Мне необходимо поместить это меню в HTML страницу, но в таком случае пропадает "выпадаемость"

Видать я еще маловат, чтоб дойти до ответа...

Ваши варианты?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Professional series drop#2</title>
<style type="text/css">

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
.preload2 {background: url(prodrop2/button4.gif);}
.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(prodrop2/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(prodrop2/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(prodrop2/button4.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(prodrop2/button4.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(prodrop2/button4a.gif) no-repeat right top;}

.menu2 li:hover > a.top_link {color:#fff; background: url(prodrop2/button4.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(prodrop2/button4.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(prodrop2/button4a.gif) no-repeat right top;}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:2px; top:40px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; height:auto;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub li a.fly {background:#fff url(prodrop2/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#4ab url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;}
</style>
</head>

<body>
<span class="preload2"></span>

<ul class="menu2">
 <li class="top"><a href="http://www.cssplay.co.uk" id="home" class="top_link"><span>Home</span></a></li>
 <li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span class="down">Products</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub">
 <li><a href="../menu/" class="fly">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="../mozilla/">Nikon</a></li>
 <li><a href="../ie/">Minolta</a></li>
 <li><a href="../opacity/">Pentax</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li class="mid"><a href="../boxes/" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="../mozilla/">Wide Angle</a></li>
 <li><a href="../ie/">Standard</a></li>
 <li><a href="../opacity/">Telephoto</a></li>
 <li><a href="../menu/" class="fly">Zoom<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="../mozilla/">35mm to 125mm</a></li>
 <li><a href="../opacity/">50mm to 250mm</a></li>
 <li><a href="../menu/">125mm to 500mm</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href="../boxes/">Mirror</a></li>
 <li><a href="../opacity/" class="fly">Non standard<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="../mozilla/">Bayonet mount</a></li>
 <li><a href="../opacity/">Screw mount</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href="../mozilla/">Flash Guns</a></li>
 <li><a href="../ie/">Tripods</a></li>
 <li><a href="../opacity/">Filters</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li class="top"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub">
 <li><a href="../menu/">Printing</a></li>
 <li><a href="../layouts/">Photo Framing</a></li>
 <li><a href="../boxes/">Retouching</a></li>
 <li><a href="../mozilla/">Archiving</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li class="top"><a href="http://www.cssplay.co.uk" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub">
 <li><a href="../layouts/">Support</a></li>
 <li><a href="../boxes/" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="../mozilla/">USA</a></li>
 <li><a href="../ie/">Canadian</a></li>
 <li><a href="../opacity/">South American</a></li>
 <li><a href="../menu/" class="fly">European<!--[if IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="../mozilla/" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="../ie/">London</a></li>
 <li><a href="../menu/">Liverpool</a></li>
 <li><a href="../boxes/">Glasgow</a></li>
 <li><a href="../opacity/" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="../ie/">Redland</a></li>
 <li><a href="../opacity/">Hanham</a></li>
 <li><a href="../menu/">Eastville</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href="../layouts/">Cardiff</a></li>
 <li><a href="../mozilla/">Belfast</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href="../opacity/">French</a></li>
 <li><a href="../menu/">German</a></li>
 <li><a href="../boxes/">Spanish</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href="../boxes/">Australian</a></li>
 <li><a href="../boxes/">Asian</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href="../mozilla/">Buying</a></li>
 <li><a href="../ie/">Photographers</a></li>
 <li><a href="../opacity/">Stockist</a></li>
 <li><a href="../menu/">General</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li class="top"><a href="http://www.cssplay.co.uk" id="shop" class="top_link"><span class="down">Shop</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub">
 <li><a href="../ie/">Online</a></li>
 <li><a href="../opacity/">Catalogue</a></li>
 <li><a href="../menu/">Mail Order</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li class="top"><a href="http://www.cssplay.co.uk" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
fsdfs
</body>
</html>

maleficmax · October 31, 2007

Или быть может кто-то подскажет где найти аналогичное (ну похожее... может без третьего уровня вкладок) меню, потому как я сдаюсь

klierik · October 31, 2007

эм.... точно не уверен... но кажется это меню будет работать только в связке xhtml 1.0+ и css 2+

иначе его прийдеться переписывать под js.

shkoda · October 31, 2007

http://webmascon.com/topics/coding/42a.asp - здесь можно посмотреть как делать такое меню.

И если вы скачаете с этого сайта рецепты Влада Мержевича, то там тоже есть примеры такого меню.

Для того чтобы привести в чувство IE6 можно использовать еще и такое средство, как htc файл. (Здесь http://www.umade.ru/log/2004/07/30.html или здесь http://sperling.com/examples/menuh/)

maleficmax · November 1, 2007

Скрипты это бяка, я хочу от них полностью отойти...

А тот вариант предусматривает скриптование с ИЕ

мне нужно чисто ЦСС...

И мне кажется что я банально торможу и не вижу очевидного

shkoda · November 1, 2007

Какой этот вариант? Вы без дополнительного кода все равно IE6 не заставите работать. Я попробовала много вариантов для такого меню, мне по вкусу пришлось использование htc файла. Его один раз подключаешь, и потом не думаешь, что IE6 не понимает hover для всех элементов. Пробуйте.

klierik · November 1, 2007

ну конечно же вы можете попробывать использовать написать все меню на теге

но я б не советовал на столько "извращаться".

просто подключайте скрипт опционально для ie6 и делайте работу с улыбкой на лице

maleficmax · November 1, 2007

Улыбка скоро перестанет сходить с моего лица)))

Спасибо всем, ищу решение, думаю вопросы еще будут...

А htc говорят штука тормозная страшно...

Это есть быть правда?

Dimitry Wolotko · November 1, 2007

С чего она должна тормозить то?

klierik · November 1, 2007

в *.htc находиться обычный js-код.

Сразу скажу что от части он тормазнутый, если его смотреть под ie6, так как он вообще ужасно отрабатывает его.

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

Далее идет Опера 9 по скорости отработки скрипта.

Лидерами, в рамках данного вопроса, являются Safari for Win и конечно же FireFox 2.

Кстати, альфа версия FF3 с js(dhtml) работает на порядок быстрее нежели 2я версия, что не может не радовать

и уж если фиксы подобного типа используют в веб-приложениях, где размер скриптов может достичь пару МБ, то я не думаю что ваш проект начнет уж на столько существенно медлено работать

Sign In

CSS меню из XHTML в простой HTML

Question

maleficmax

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

maleficmax

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

shkoda

Link to comment

Share on other sites

maleficmax

Link to comment

Share on other sites

shkoda

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

maleficmax

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information