Pada kesempatan ini blog.spezer.net akan membagikan tutorial cara membuat Neat CSS3 Menu Dropdown di Blogger. Mungkin saja sobat telah bosan dengan menu navigasi di blog sobat dan ingin mencobanya dengan tampilan baru maka sobat dapat mencoba menu navigasi yang satu ini.

Pada waktu yang lalu blog ini juga sudah membagikan menu navigasi Lavalamp dan juga cara membuat link aktif pada javascript, maka pada kesempatan ini blog ini akan membagikan cara membuat Neat CSS3 menu dropdown di Blogger.

Neat CSS3 Dropdown Menu 


Cara Membuat Neat CSS3 Dropdown Menu di Blogger
Neat CSS3 Dropdown Menu

Sobat dapat melekan kode-kode di bawah ini ke dalam template blog (Tema➔Edit Html) dan letakan kode CSS diantara element <style> dan </style>, kemudian letakan kode HTML nya ke tempat yang tepat.

CSS


#contact-links { text-shadow:0 -1px 0 rgba(0,0,0,0.3); margin:auto; position:relative; width:100%; }
#contact-links a { color:#4C9FEB; }
#contact-links a:hover { color:#3D85C6; }
#my-links { float:right; font-size:12px; margin:4px 10px; overflow:hidden; text-shadow:0 1px 0 #FFFFFF; }
#my-links a { margin-left:7px; padding-left:8px; text-decoration:none; }
#my-links a:first-child { border-width:0; }
#menu-container { background:-webkit-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent; background:linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6',endColorstr='#e9eaea',GradientType=0 ); border-radius:0 0 4px 4px; border:1px solid rgba(0,0,0,0.1); box-shadow:-1px 1px 0 rgba(255,255,255,0.8) inset; clear:both; height:46px; padding-top:1px; }
#neat-menu { float:left; }
#neat-menu a { text-decoration:none; }
#neat-menu ul { list-style:none; margin:0; padding:0; }
#neat-menu > ul > li { float:left; padding-bottom:12px; }
#neat-menu ul li a { box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset,1px 0 0 rgba(255,255,255,0.8) inset; border-color:#D1D1D1; border-image:none; border-style:solid; border-width:0 1px 0 0; color:#333333; display:block; font-size:14px; height:25px; line-height:25px; padding:11px 15px 10px; text-shadow:0 1px 0 #FFFFFF; }
#neat-menu ul li a:hover { background:-webkit-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent; background:linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef',endColorstr='#e9eaea',GradientType=0 ); }
#neat-menu > ul > li.active > a { background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0 ); border-bottom:1px solid #2D81CC; border-top:1px solid #4791D6; box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset; color:#FFFFFF; margin:-1px 0 -1px -1px; text-shadow:0 -1px 0 rgba(0,0,0,0.3); }
#neat-menu > ul > li.active > a:hover { background:-webkit-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent; background:linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE',endColorstr='#3F96E5',GradientType=0 ); }
#neat-menu > ul > li:first-child > a { border-radius:0 0 0 5px; }
#neat-menu ul ul { background:-webkit-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent; background:-moz-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent; background:linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7',endColorstr='#F4F4F4',GradientType=0 ); border-radius:5px 5px 5px 5px; border:1px solid rgba(0,0,0,0.1); box-shadow:0 1px 0 #FFFFFF inset; height:0; margin-top:1px; opacity:0; overflow:hidden; width:240px; padding:0; position:absolute; visibility:hidden; z-index:1; -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; }
#neat-menu ul li:hover ul { margin-top:0\2; height:auto; opacity:1; visibility:visible; }
#neat-menu ul ul a { border-right-width:0; border-top:1px solid #D1D1D1; box-shadow:0 1px 0 #FFFFFF inset; color:#444444; height:24px; line-height:24px; padding:7px 12px; text-shadow:0 1px 0 #FFFFFF; }
#neat-menu ul ul a:hover { background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0 ); border-top:1px solid #4791D6; box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset; color:#FFFFFF; text-shadow:0 -1px 0 rgba(0,0,0,0.3); }
#neat-menu ul ul li:first-child a { border-top-width:0; }
#menu-search { margin:8px 10px 0 0; float:right; }
#menu-search form { background:url("http://1.bp.blogspot.com/-NzU9je1udG4/Uw-1tZku4eI/AAAAAAAAGWs/-h4BU1mFTiU/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent; border:1px solid #CCCCCC; border-radius:3px 3px 3px 3px; box-shadow:0 1px 0 rgba(0,0,0,0.05) inset,0 1px 0 #FFFFFF; height:26px; padding:0 25px; position:relative; width:130px; }
#menu-search form:hover { background-color:#F9F9F9; }
#menu-search form input { color:#999999; font-size:13px; height:26px; text-shadow:0 1px 0 #FFFFFF; background:none repeat scroll 0 0 transparent; border:medium none; float:left; outline:medium none; padding:0; width:100%; }
#menu-search form input.placeholder,#menu-search form input:-moz-placeholder { color:#C4C4C4; }

HTML


<div id='contact-links'>
    <div id='my-links'>
        <a href='#'>About</a>
        <a href='#'>Contact</a>
                <a href='#'><img height='18px' src='http://3.bp.blogspot.com/-bsoTf8EpVbE/Uw_W2HmlPOI/AAAAAAAAGXQ/RS57fNXl1tE/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='http://2.bp.blogspot.com/-9OXxCWCilgM/Uw_WNEqUShI/AAAAAAAAGXI/2T6Dc8zVrxA/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='#'><img height='18px' src='http://3.bp.blogspot.com/-LQABZjrBgiY/Uw_X4zGqixI/AAAAAAAAGXo/jlR7r1blHso/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='#'><img height='18px' src='http://1.bp.blogspot.com/-NsPs8DRJfP4/Uw_XnNMAHTI/AAAAAAAAGXg/qC2kA_T-BdY/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
    </div>
    <div id='menu-container'>
        <nav id='neat-menu'>
            <ul>
              <li class='active'><a href='/'>Home</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <!-- menu-search form -->
        <div id='menu-search'>
          <form method='get' action='/search'>
                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>




Kekurangan menu navigasi ini adalah belum responsive, tapi sobat dapat membuatnya responsive jika mau. Ok selamat mencoba, salam sukses.
0 Komentar untuk "Menu Navigasi: Neat CSS3 Dropdown Menu"