◄ Min  Size Fonts: + | - | ± Color: Max ►

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.
  3. Masukan kode HTML diantara tag <body>...</body>
  4. <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>
  5. 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;
    }
  3. Kode HTML juga sama seperti biasa masukinnya yah sob :D
  4. <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>
  5. Save.
  6. 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;}
  3. Kode HTML
  4. <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>
  5. Save.
  6. 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.
  3. Kode HTML
  4. <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
  5. Letakan scriptnya dibawah tag <head>
  6. <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>
  7. 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 >-)
Loading...
XMenu Menu

Subscribe my posts Register For Free!

3 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE