Jump to content
  • 0

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

maleficmax

Asked by maleficmax,

 Share

Question

maleficmax Explorer

maleficmax

Posted
Posted

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

Мне необходимо поместить это меню в 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>

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
shkoda Explorer

shkoda

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
maleficmax Explorer

maleficmax

Posted
  • Author
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
shkoda Explorer

shkoda

Posted
Posted

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

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted

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

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

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

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

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

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

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

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
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept