Хоризонтално меню с под менюта

[cold_zero]

Здравейте, трябва ми меню като това на картинката, някой има ли идеи къде мога да намеря такова?

Идеята е като се отиде примерно на "За нас" и там да се появява такова submenu отдолу.

 

[tedobedo]

http://apycom.com/menus/1-white-smoke.html
Тук има най-различни и са много добри! :?:

 

[cold_zero]

Попаднах на този сайт, но не намерих нищо подобно на това което съм показал на картинката ;/

 

[headsho7]

ето .... пооправи си го малко защото адски бързам

<html>
<head>
<meta http-equiv="content-type" charset=windows-1251>
<script src="jquery.js" type"text/javascript></script>
<title>
Menu
</title>
<style>



.menu
{
width:1000px;
height:30px;
border:1px solid gray;
background-color:#cc9933;
float:left;

}

.menu ul
{
float:left;
}

.menu ul li
{
list-style-type:none;
padding-left:20px;
float:left;
font-color:white;
}


</style>




<script>

$(document).ready(function(){

$("#slide").hide()

});

function slide()
{
$("#slide").slideToggle("slow");}



</script>

</head>


<body>
<div class="menu">
<ul>
<li>
<a href="#">Текст1</a></li>
<li>
<a href="#">Текст2</a></li>
<li><table>
<a href="#" onclick="slide()">Текст3</a></li>
<div style="position:absolute; top=70; "><div id="slide"><br>Текст7  Текст8  Текст 9

</ul>
</div>
</body>
</html>

 

[adrian]

http://users.tpg.com.au/j_birch/plugins/superfish/#sample4

Examples -> nav-bar style ще ти свърши работа

 

[svet1bg]

Пробвай това :

ТЕСТВАЙ МЕ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
     <head>
          <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
          <script type="text/javascript" src="../js/jquery-ui-1.8.7.custom.min.js"></script>
          <script type="text/javascript" src="../js/jquery-1.4.4.js"></script>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <style>
               *{
                    margin:0px;
                    padding:0px;
               }
               #menu{
                    width:1024px;
                    height:50px;
                    border:1px gray solid;
                    background:lime;
                    font-size:24px;
                    font-weight:bold;
               }
               #a1{
                    width:100px;
                    height:38px;
                    border:1px gray solid;
                    float:left;
                    margin:5px;
               }
               #a2{
                    width:100px;
                    height:38px;
                    border:1px gray solid;
                    float:left;
                    margin:5px;
               }
               #a3{
                    width:100px;
                    height:38px;
                    border:1px gray solid;
                    float:left;
                    margin:5px;
               }
               #a4{
                    width:100px;
                    height:38px;
                    border:1px gray solid;
                    float:left;
                    margin:5px;
               }
               #a5{
                    width:100px;
                    height:38px;
                    border:1px gray solid;
                    float:left;
                    margin:5px;
               }
               #a6{
                    width:100px;
                    height:38px;
                    border:1px gray solid;
                    float:left;
                    margin:5px;
               }
               #podmenu{
                    position:absolute;
                    width:350px;
                    height:50px;
                    border:1px gray solid;
                    float:left;
                    margin:5px;
                    background:red;
               }

               #p4{
                    width:100px;
                    height:38px;
                    border:1px gray solid;
                    float:left;
                    margin:5px;
               }
               #p5{
                    width:100px;
                    height:38px;
                    border:1px gray solid;
                    float:left;
                    margin:5px;
               }
               #p6{
                    width:100px;
                    height:38px;
                    border:1px gray solid;
                    float:left;
                    margin:5px;
               }
          </style>
          <script>
               $(document).ready(function(){

                    $("#podmenu").hide();

                    $("a").hover(function(e){
                         $("#podmenu").remove();
                         $("<div id=\"podmenu\">\n\
                              <div id=\"p4\"><a href=\"#\">LINK1</a></div>\n\
                              <div id=\"p5\"><a href=\"#\">LINK2</a></div>\n\
                              <div id=\"p6\"><a href=\"#\">LINK3</a></div>\n\
                            </div>")
                         .css("top",e.pageY+15)
                         .css("left",e.pageX+15)
                         .appendTo("body");
                    });
               });
          </script>
          <title></title>
     </head>
     <body>
          <br><br>
          <center>
               <div id="menu">
                    <div id="a1">
                         <a id="t1" href="#">HOME</a>
                    </div>
                    <div id="a2">
                         <a id="t1" href="#">2222</a>
                    </div>
                    <div id="a3">
                         <a id="t1" href="#">3333</a>
                    </div>
                    <div id="a4">
                         <a id="t1" href="#">4444</a>
                    </div>
                    <div id="a5">
                         <a id="t1" href="#">5555</a>
                    </div>
                    <div id="a6">
                         <a id="t1" href="#">6666</a>
                    </div>
               </div>
               
          </center>
     </body>
</html>

Успех в начинанието