Sabtu, 26 Juni 2010

Menu Menu

Baca dulu dong postingan ini Hybrid Menu, karena postingan kali ini akan bercerita tentang menu. Nah, yang dimaksudkan pasti sudah mengerti. Menu disini bukan menu untuk makanan sob :D melainkan menu navigasi pada web/blog :) Macam dan jenis bisa jadi rujukan mau yg mana sobat memakainya ;)) Basa basinya sudah ah, soalnya bakalan panjang nih postingan :-"

www.sohtanaka.com/web-design/active-state-in-css-navigations

Menu navigasi kreasi SohTanaka ini prinsip kerja dengan menggunakan gambar. Maka itu harus ada gambarnya :D Disini gambarnya nih Download Picture. Setelah didownload, dihosting gambarnya ya :)
  1. Letakan kode CSS berikut sebelum kode ]]></b:skin>
    2. .container {
    width: 960px;
    height: 58px;
    position: absolute;
    font-size: 1.2em;
    }
    ul#topnav {
    margin: 0 0 20px; padding: 0;
    list-style: none;
    width: 960px;
    float: left;
    }
    ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    }
    ul#topnav a {
    float: left;
    display: block;
    height: 58px;
    text-indent: -99999px;
    background-position: left top;
    }
    ul#topnav a:hover {
    background-position: left -58px;
    }
    #home li.home a,
    #about li.about a,
    #services li.services a,
    #portfolio li.portfolio a,
    #contact li.contact a,
    #blog li.blog a {
    background-position: left bottom;
    }
    ul#topnav li.home a {
    background-image: url(home.jpg);
    width: 120px;
    }
    ul#topnav li.about a {
    background-image: url(about.jpg);
    width: 147px;
    }
    ul#topnav li.services a {
    background-image: url(services.jpg);
    width: 157px;
    }
    ul#topnav li.portfolio a {
    background-image: url(portfolio.jpg);
    width: 182px;
    }
    ul#topnav li.contact a {
    background-image: url(contact.jpg);
    width: 179px;
    }
    ul#topnav li.blog a {
    background-image: url(blog.jpg);
    width: 175px;
    }
    Ganti tulisan warna biru dg gambar yg tadi didownload.
  2. Masukan kode HTML diantara tag <body>...</body>
    3. <div class="container">
    <ul id="topnav">
    <li class="home"><a href="http://">Home</a></li>
    <li class="about"><a href="http://">About Us</a></li>
    <li class="services"><a href="http://">Services</a></li>
    <li class="portfolio"><a href="http://">Portfolio</a></li>
    <li class="contact"><a href="http://">Contact</a></li>
    <li class="blog"><a href="http://">Blog</a></li>
    </ul>
    </div>
  3. Save.
Nah itu menu pertama full stylish sob :D Kita lanjut ke menu yg sederhana yuk, tapi gaya juga atuh :))

Aext.Net Magazine

Disini ada 2 buah menu sob! Vertikal dan horizontal gaya yg dibuatnya ;)
>> Horizontal
  1. Letakan kode CSS seperti biasa.
    2. #horizontal {
    width: auto;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #horizontal li {
    clear: both;
    height: 2em;
    }
    #horizontal li a {
    float: left;
    display: block;
    padding: 4px;
    text-decoration: none;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 5px;
    margin-right: 10px;
    }
    #horizontal li:hover a,
    #horizontal li a:hover
    {
    background: #999;
    color: #fff;
    }
    #horizontal ul {display: none;}
    #horizontal li:hover ul {display: block;}
    #horizontal ul {
    list-style: none;
    float: left;
    margin: 0;
    padding: 4px 8px;
    }
    #horizontal ul li {
    float: left;
    clear: none;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    color: #999;
    }
    #horizontal li:hover ul li a,
    #horizontal ul li a
    {
    display: inline;
    padding: 0 6px 0 0;
    float: none;
    text-transform: lowercase;
    color: #999;
    background: none;
    }
    #horizontal li:hover ul li a:hover,
    #horizontal ul li a:hover
    {
    background: #aaa;
    color: #000;
    }
  2. Kode HTML juga sama seperti biasa masukinnya yah sob :D
    3. <ul id="horizontal">
    <li>
    <a href="#">Parent Item 1</a></li>
    <li>
    <a href="#">Parent Item 2</a><ul>
    <li><a href="#">Child Item 1</a></li>
    <li><a href="#">Child Item 2</a></li>
    <li><a href="#">Child Item 3</a></li>
    </ul>
    </li>
    <li><a href="#">Parent Item 3</a>
    <ul>
    <li><a href="#">Child Item 1</a></li>
    <li><a href="#">Child Item 2</a></li>
    </ul>
    </li>
    <li><a href="#">Parent Item 4</a></li>
    </ul>
  3. Save.
  4. Demo
Yang vertikal dateng ajah ke webnya :))

HiFi CMS for Designers

  1. Kode CSS
    2. #trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0}
    #trans-nav li {float: left; position: relative; padding: 0; line-height: 40px; background: #5a8078}
    #trans-nav li:hover {background-position: 0 -40px;}
    #trans-nav li a {display: block; padding: 0 15px; color: #fff; text-decoration: none;}
    #trans-nav li a:hover {color: #6CCE6D;}
    #trans-nav li ul {opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0;}
    #trans-nav li:hover ul {opacity: 1;}
    #trans-nav li ul li {float: none; position: static; height: 0; line-height: 0; background: none;}
    #trans-nav li:hover ul li {height: 30px; line-height: 30px;}
    #trans-nav li ul li a {background: #63867f;}
    #trans-nav li ul li a:hover {background: #5a8078;}
    #trans-nav li {-webkit-transition: all 0.2s;}
    #trans-nav li a {-webkit-transition: all 0.5s;}
    #trans-nav li ul {-webkit-transition: all 1s;}
    #trans-nav li ul li {-webkit-transition: height 0.5s;}
  2. Kode HTML
    3. <ul id="trans-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Widgets</a></li>
    <li><a href="#">Thingamabobs</a></li>
    <li><a href="#">Doohickies</a></li>
    </ul>
    </li>
    <li><a href="#">Contact</a></li>
    </ul>
  3. Save.
  4. Demo

www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery

  1. Kode CSS
    2. ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width: 970px;
    list-style: none;
    position: relative;
    font-size: 1.3em;
    background: url(topnav_stretch.gif) repeat-x;
    }
    ul#topnav li.on a {
    background-color: #1376c9;
    }
    ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;
    }
    ul#topnav li a {
    padding: 5px 10px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
    }
    ul#topnav li:hover {background: #1376c9 url(topnav_active.gif) repeat-x; }
    ul#topnav li span {
    float: left;
    padding: 10px 0;
    position: absolute;
    left: 0; top:34px;
    display: none;
    width: 970px;
    background: #1376c9;
    color: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    }
    ul#topnav li:hover span { display: block; }
    ul#topnav li span a { display: inline; }
    ul#topnav li span a:hover {text-decoration: underline;}
    Ganti tulisan berwarna biru dgn gambar yg bisa didapatkan di Picture.
  2. Kode HTML
    3. <ul id="topnav">
    <li class="on"><a href="#">Home</a></li>
    <li>
    <a href="#">About</a>
    <span>
    <a href="#">Your Title</a> |
    <a href="#">Your Title</a> |
    <a href="#">Your Title</a>
    </span>
    </li>
    <li>
    <a href="#">Services</a>
    <span>
    <a href="#">Your Title</a> |
    <a href="#">Your Title</a> |
    <a href="#">Your Title</a>
    </span>
    </li>
    <li>
    <a href="#">Portfolio</a>
    <span>
    <a href="#">Your Title</a> |
    <a href="#">Your Title</a> |
    <a href="#">Your Title</a> |
    <a href="#">Your Title</a> |
    <a href="#">Your Title</a>
    </span>
    </li>
    <li><a href="#">Contact</a></li>
    </ul>
    Pada menu ini sobat memerlukan jQuery minimal versi v1.3.2
  3. Letakan scriptnya dibawah tag <head>
    4. <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">//<![CDATA[
    $(document).ready(function(){$("ul#topnav li").hover(function(){$(this).css({'background':'#1376c9 url(topnav_active.gif) repeat-x'});$(this).find("span").show();},function(){$(this).css({'background':'none'});$(this).find("span").hide();});});//]]></script>
  4. Save.

Design your way

Mungkin segitu aneka menu yg bisa Beben sajikan (:| Kalau mau menengok ini nih ;)) 3point7designs dan sobat bisa mempelajarinya di 3point7designs. Dadah :-h >-)
Diposting oleh di
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)