Jump to content
  • 0

Как можно реализвать подобное меню?


DImaN
 Share

Question

Доброе время суток. помогите пожалуйста реализовать меню подобное тому, какое на данном сайте: http://www.fordvehicles.com/

я имею в виду именно о том раскрывающемся меню с пунктами "Ford now, cars и.т.д."

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

Спасибо за помощь

Edited by DImaN
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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

например вот немного кода:

<ul id="menu2">

<li class="top"><a href="#nogo" class="top_link">Home</a></li>
<li class="top"><a href="#nogo" class="top_link">Contacts<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><iframe></iframe><![endif]-->
<ul class="sub">
<li class="subtop"><span><a href="#nogo">Support</a></span><b></b></li>
<li class="fly"><span><a href="#nogo">Sales<!--[if gte IE 7]><!--></a></span><b></b><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><iframe></iframe><![endif]-->
<li><span><a href="#nogo">Buying</a></span><b></b></li>
<li><span><a href="#nogo">Photographers</a></span><b></b></li>
<li><span><a href="#nogo">Stockist</a></span><b></b></li>
<li class="subbot"><span><a href="#nogo">General</a></span><b></b></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

вот фрагмент css кода:

#menu2 {padding:0; width:750px; margin:0; list-style:none; height:28px; position:relative; z-index:500; font-family:arial, verdana, sans-serif; background:#000; border-bottom:1px solid #edb;}
#menu2 li.top {display:block; float:left;}

#menu2 li a.top_link {display:block; height:25px; float:left; line-height:22px; font-size:11px; font-weight:bold; padding:0 20px 0 10px; color:#edb; text-decoration:none; border-top:3px solid #000;}

#menu2 li a.top_link:hover {color:#d85; border-color:#a52;}

#menu2 li:hover > a.top_link {color:#d85; border-color:#a52;}

#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; position:relative; z-index:200;}
#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; height:0; margin:0; padding:0; list-style:none;}

#menu2 :hover ul.sub {left:0; top:25px; white-space:nowrap; width:120px; height:auto; z-index:300; padding-top:5px; background:url(trans.gif);}
#menu2 :hover ul.sub li {display:block; float:left; width:100%; height:25px;}
#menu2 :hover ul.sub li span {display:block; height:25px; float:left; width:90px; font-weight:normal;}
#menu2 :hover ul.sub li b {display:block; height:25px; float:left; width:30px; font-weight:normal;}

#menu2 :hover ul.sub li a {display:block; position:relative; font-size:11px; height:25px; width:120px; margin-right:-30px; line-height:25px; text-indent:10px; color:#edb; text-decoration:none; background:url(trans.gif);}

#menu2 :hover ul.sub li span a:hover {color:#f97;}

#menu2 :hover ul.sub li:hover > span a {color:#f97;}

#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:120px; top:0; white-space:nowrap; width:120px; z-index:400; height:auto;}

#menu2 :hover ul.wide {width:150px;}
#menu2 :hover ul.wide li span {width:120px;}
#menu2 :hover ul.wide li a {width:150px;}

#menu2 :hover ul.narrow {width:90px;}
#menu2 :hover ul.narrow li span {width:60px;}
#menu2 :hover ul.narrow li a {width:90px;}

#menu2 :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul.narrow :hover ul
{left:90px;}

#menu2 li > span {
background: url(tab-midleft.png);
}
#menu2 li > b {
background: url(tab-midright.png)
}
#menu2 li.fly > b {
background: url(tab-midright-sub.png)
}

#menu2 li.subtop > span,
#menu2 li.flytop > span {
background:url(tab-topleft.png);
}
#menu2 li.subtop > b {
background:url(tab-topright.png);
}

#menu2 li.flytop > b {
background:url(tab-topright-sub.png);
}

#menu2 li.subbot > span,
#menu2 li.flybot > span {
height:35px !important; background:url(tab-botleft.png);
}

#menu2 li.subbot > b {
height:35px !important; background:url(tab-botright.png);
}
#menu2 li.flybot > b {
height:35px !important; background:url(tab-botright-sub.png);
}

Edited by DImaN
Link to comment
Share on other sites

  • 0
и что? это-же легко делается без него

А я и не говорил, что это невозможно.

Способов много. Можно покопаться надо в инете. А здесь Вам его никто не напишет и не распишет, т.к. время — деньги.

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