Vimeo style horizontal nav

Yazar

vimeo

Vimeo  sitesindeki yatay açılır menünün bir benzeri.  Şu anda  Vimeo farklı bir tasarım kullanıyor. Burada paylaştığımız tasarım sitenin ilk haliydi.

  • Download
  • Demo

Kullanım :

Head  etiketleri  arasına eklenecek kısım.

Css :

<style>
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:12px; margin:0px 20px;}
        /* menu */
        #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; }
        #menu a { color:#fff; text-decoration:none; }
        #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;}
        #menu > li a:hover {color:#B0D730;}
        #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
        /* sub-menus*/
        #menu ul { padding:0px; margin:0px; display:block; display:inline;}
        #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; }
        #menu li:hover ul { display:block;}
        #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px;  border-top: dotted 1px #606060; list-style-type:none; }
        #menu li ul li:first-child { border-top: none; }
        #menu li ul li a { display:block; color:#0395CC; }
        #menu li ul li a:hover { color:#7FCDFE; }
        /* main submenu */
        #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;}
        /* search */
        .searchContainer div { background-color:#fff; display:inline; padding:5px;}
        .searchContainer input[type="text"] {border:none;}
        .searchContainer img { vertical-align:middle;}
        /* corners*/
        #menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
        #menu .corner_inset_right { position:absolute; top:0px; left:150px;}
        #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
        #menu .corner_left { position:absolute; left:0px; top:0px;}
        #menu .corner_right { position:absolute; left:132px; top:0px;}
        #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;}
    </style>

Body  etiketleri  arasına eklenecek kısım.

Html :

<div style="margin-left:50px;">
        <ul id="menu">
            <li class="logo">
                <img style="float:left;" alt="" src="menu_left.png"/>
                <ul id="main">
                    <li>Welcome to <b>Create Vimeo-like top navigation</b> tutorial!</li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_blue_left.png"/>
                        <img class="middle" alt="" src="dot_blue.png"/>
                        <img class="corner_right" alt="" src="corner_blue_right.png"/>
                    </li>
                </ul>
            </li>
            <li><a href="#">Login</a>
            </li>
            <li><a href="#">Help</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">General help</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                    <li><a href="#">Posts</a></li>
                    <li><a href="#">Pages</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
            </li>
            <li class="searchContainer">
                <div>
                <input type="text" id="searchField" />
                <img src="magnifier.png" alt="Search" onclick="alert('You clicked on search button')" /></div>
                <ul id="search">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <input id="cbxAll" type="checkbox" />All
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                    <li><input id="Articles" type="checkbox" />Articles</li>
                    <li><input id="Tutorials" type="checkbox" />Tutorials</li>
                    <li><input id="Reviews" type="checkbox" />Reviews</li>
                    <li><input id="Resources" type="checkbox" />Resources</li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
            </li>
        </ul>
        <img style="float:left;" alt="" src="menu_right.png"/>
</div>

 



1 Yorum
  1. osman 6 sene ago
    Reply

    süper bir paylaşım yapmışsınız sizi tebrik ediyorum. Özellikle garaj kapısı menüsü bir harika .Sitemde kullanacağım .Kullanıma açınca ayrıca bildireceğim

Yorum Yap

Email adresiniz yayınlanmayacak.

Bunlar da ilgini çekebilir

Trend Konular