Blogger Note

Article :

CSS3 Dropdown Menu

Pada Tutorial Sebelumnya Musa Khairul Umam Sudah Menerangkan Cara Membuat Menu Toolip Dengan Efek JQuery (Smart Menu) akan tetapi pada Tutorial Blog Ini akan Membuat CSS3 Dropdown Menu untuk demonya bisa lihat disini  trik ini mudah untuk digunakan sobat hanya menambah css diatas kode ]]></b:skin>  dan membuat menunya dengan add gadget atau di bawah kode <div id='header-wrapper'> bagaimana apakah sobat tertarik untuk membuatnya ? jika tertarik mari kita mulai simak tutorialnya dibawah ini: 


  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya : 
/*----------------
CSS3 DropDown Menu
-------------------------------*/
#navcss {
    margin: 0;
    padding: 7px 6px 0;
    background: #7d7d7d url(http://4.bp.blogspot.com/-m_N9lS0PE8g/Ta_k-oCYIsI/AAAAAAAAAnk/YlbpJFsGE68/s1600/gradient.png) repeat-x 0 -110px;
    line-height: 100%;


    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;


    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#navcss li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
}




/* main level link */
#navcss a {
    font-weight: bold;
    color: #000;
    text-decoration: none;
    display: block;
    padding:  8px 20px;
    margin: 0;


    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
  
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#navcss a:hover {
    background: #000;
    color: #000;
}


/* main level link hover */
#navcss .current a, #navcss li:hover > a {
    background: #666 url(http://4.bp.blogspot.com/-m_N9lS0PE8g/Ta_k-oCYIsI/AAAAAAAAAnk/YlbpJFsGE68/s1600/gradient.png) repeat-x 0 -40px;
    color: #000;
    border-top: solid 1px #f8f8f8;


    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    box-shadow: 0 1px 1px rgba(0,0,0, .2);


    text-shadow: 0 1px 0 rgba(255,255,255, 1);
}


/* sub levels link hover */
#navcss ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #000;


    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
#navcss ul a:hover {
    background: #0078ff url(http://4.bp.blogspot.com/-m_N9lS0PE8g/Ta_k-oCYIsI/AAAAAAAAAnk/YlbpJFsGE68/s1600/gradient.png) repeat-x 0 -100px !important;
    color: #000 !important;


    -webkit-border-radius: 0;
    -moz-border-radius: 0;


    text-shadow: 0 1px 1px rgba(0,0,0, .1);
}


/* dropdown */
#navcss li:hover > ul {
    display: block;
}


/* level 2 list */
#navcss ul {
    display: none;


    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url(http://4.bp.blogspot.com/-m_N9lS0PE8g/Ta_k-oCYIsI/AAAAAAAAAnk/YlbpJFsGE68/s1600/gradient.png) repeat-x 0 0;
    border: solid 1px #b4b4b4;


    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;


    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#navcss ul li {
    float: none;
    margin: 0;
    padding: 0;
}


#navcss ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
}


/* level 3+ list */
#navcss ul ul {
    left: 181px;
    top: -3px;
}


/* rounded corners of first and last link */
#navcss ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;


    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}
#navcss ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;


    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}


/* clearfix */
#navcss:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#navcss {
    display: inline-block;
}
    
       4.lalu save template 
       5.lalu pilih add gadget lalu copy dan paste di kolom add gadget
      
<ul id="navcss">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">My Projects</a>


        <ul>
            <li><a href="#">N.Design Studio</a>
                <ul>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">WordPress Themes</a></li>
                    <li><a href="#">Wallpapers</a></li>
                    <li><a href="#">Illustrator Tutorials</a></li>


                </ul>
            </li>
            <li><a href="#">Web Designer Wall</a>
                <ul>
                    <li><a href="#">Design Job Wall</a></li>
                </ul>
            </li>
            <li><a href="#">IconDock</a></li>


            <li><a href="#">Best Web Gallery</a></li>
        </ul>
    </li>
    <li><a href="#">Multi-Levels</a>
        <ul>
            <li><a href="#">Team</a>
                <ul>


                    <li><a href="#">Sub-Level Item</a></li>
                    <li><a href="#">Sub-Level Item</a>
                        <ul>
                            <li><a href="#">Sub-Level Item</a></li>
                            <li><a href="#">Sub-Level Item</a></li>
                            <li><a href="#">Sub-Level Item</a></li>


                        </ul>
                    </li>
                  
                    <li><a href="#">Sub-Level Item</a></li>
                </ul>
            </li>
            <li><a href="#">Sales</a></li>
            <li><a href="#">Another Link</a></li>


            <li><a href="#">Department</a>
                <ul>
                    <li><a href="#">Sub-Level Item</a></li>
                    <li><a href="#">Sub-Level Item</a></li>
                    <li><a href="#">Sub-Level Item</a></li>
                </ul>
            </li>


        </ul>
    </li>  
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
  
     6.Untuk yang dari <div id='header-wrapper'> pastekan kode diatas di bawah <div id='header-wrapper'>
     7.dan yang terakhir jangan lupa untuk menyimpannya

Selamat Mencoba
 Note :Menu ini bisa dikembangkan sesuai keinginan masing-masing... :), ^_^

19 comments:

17 September 2011 20.47

wah keren ya dropdown menunya .. :D
thx mas ..

17 September 2011 21.19

@Blog SEO:Sama2 juga mas

17 September 2011 23.35

nice info sob,, bagus nih, bisa langsung di praktekkan

17 September 2011 23.40

@Share Our Knowledge:silahkan dipraktekin

18 September 2011 02.53

Tergantung Blognya kalau sudah banyak menggunakan JS maka Akan memberatkan blog tapi kalo Sedikit JS nya Tidak Terlalu Berat intinya jangan terlalu banyak JS di Blog kita

18 September 2011 03.33

ada demonya gak sob?
ane mau liat dulu baru dicoba

18 September 2011 03.55

@ZhenTho:Ok gan

18 September 2011 03.55

@Liandri eko:Demonya belum ada sob hehehe...

19 September 2011 02.39

menunya keren sobb..
entar kapan2 saia coba dhe'... :)

21 September 2011 03.26

kalo kode yang ke 2 di taro di templet bukan di add gadget bisa kga?

21 September 2011 06.28

@Liandri eko:Ane belum nyoba kalo yang itu sob,di coba aja sob

22 September 2011 07.43

mantap gann makasihh infonya

11 Oktober 2011 09.03

@Musa Khairul Umam: kotak komentarnya kok gak ada sob?

oya ane mau donk script yang seperti diblog ini bodynya muncul perlahan2. ane gx tau nmnya ap.
bales blog ane gan.
sekalian ijin mau nyoba nie script

11 Oktober 2011 10.37

@Musa Khairul Umam:makasih sob, sudah saya pake diblog saya ni tutorial.

21 Oktober 2011 00.49

keren yg tombol atas nya tuh sob,, gimana cara nya tuh..? o.O

21 Oktober 2011 00.49

mau lihat demonya dong

21 Oktober 2011 17.15

Faris:Demonya kalau ngak salah ada diatas... :D
Musa:Manteb deh.................. :D

29 Oktober 2011 04.32

kyaknya, agan admin pinter bnget nih ngutak ngatik HTML plus CSS...
boleh dong blajar..

11 September 2012 01.29

http://peaceblogberbagi.blogspot.com/

Posting Komentar