Menu Vertikal Keren di Sidebar Efek Menu Statis Fixed

Seperti judul diatas dengan contoh gambarnya. kali ini saya akan memberikan 1 lagi menu vertikal yang gak kalah menariknya, tentunya akan semakin menambah kesan pro pada blog anda. Langsung saja, mari disimak yaaa...
Pertama masuk Layout >> Add a new Widget >> HTML/JAVASCRIPT
 Paste kedalamnya semua kode di bawah ini >>

<style>
ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#BuildNextWebMenu{
    width: 240px;
    height: 100%;
    position: fixed;
}

.BuildNextWebMenu-left{
    left: -180px;
    top: 0px;
    transition:left 1s;
}

.BuildNextWebMenu-left:hover{
    left:0px;
}

/*################## RIGHT MENU ##############*/
.BuildNextWebMenu-right{
    right: -180px;
    top: 0px;
    direction: rtl;
    transition:right 1s;
}
.BuildNextWebMenu-right ul>li i,#toggle{
    right: 200px;
}

.BuildNextWebMenu-right:hover{
    right:0px;
}


#menuHeader{
    width: 100%;
    height: 60px;
    cursor: pointer;
}

#toggle{
    position: absolute;
    left: 195px;
    top: 10px;
}

#menuLogo{
    position: absolute;
    top: 10px;
}

#BuildNextWebMenu ul>li{
    position: relative;
    height: 45px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

#BuildNextWebMenu ul>li a{
    color: #fff;
    line-height: 48px;
    margin: 20px;
    font-family: 'Alegreya Sans SC', sans-serif;
    transition: color 0.5s;
    text-decoration: none;
}
#BuildNextWebMenu ul>li i{
    position: absolute;
    left: 200px;
    top:15px;
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.5s;
}
#social{
    width: 85%;
    height: 100px;
    margin: 20px auto auto auto;
}

#social a{
    text-decoration: none;
}

#social i{
    width: 36px;
    height: 36px;
    color: #fff;
    text-align: center;
    line-height: 37px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.5s;
}

#social .fa-facebook:hover{
    background: #305891;
}

#social .fa-twitter:hover{
    background: #2CA8D2;
}

#social .fa-youtube:hover{
    background: #C82828;
}

#social .fa-google-plus:hover{
    background: #CE4D39;
}

#BuildNextWebMenu{
    background: #222222;
    color: #fff;
}
#menuHeader{
    background: #24AAE9;
}

#BuildNextWebMenu ul>li:hover  a{
    color: #24AAE9;
}
#BuildNextWebMenu ul>li:hover  i{
    color: #24AAE9;
}
</style>
<div id="BuildNextWebMenu" class="BuildNextWebMenu-left">
    <div id="menuHeader">
        <div id="toggle"><i class="fa fa-bars fa-2x"></i></div>
      <div id="menuLogo"><img src="img/logo.png" alt="BuildNextWebMenu"/></div>
    </div>
    <nav>
        <ul>
            <li>
                <a href="#">
                    HOME <i class="fa fa-home"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    ABOUT <i class="fa fa-user"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    CLIENTS    <i class="fa fa-users"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    SHOP <i class="fa fa-shopping-cart"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    NEWS <i class="fa fa-file"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    SERVICES <i class="fa fa-laptop"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    PORTFOLIO <i class="fa fa-home"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    TEAM <i class="fa fa-group"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    BLOG <i class="fa fa-folder"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    MAP <i class="fa fa-map-marker"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    CONTACT <i class="fa fa-envelope"></i>
                </a>
            </li>
        </ul>
    </nav>

    <div id="social">
        <a href="#">
            <i class="fa fa-facebook fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-google-plus fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-twitter fa-2x"></i>
        </a>   
        <a href="#">
            <i class="fa fa-youtube fa-2x"></i>
        </a>   
    </div>

</div>

Terakhir Save/Simpan.
Eitttzzz satu lagi... setelah itu copy kode di bawah ini dibawah <meta content=) HTML blog anda. 

<link href='http://lipis.github.io/bootstrap-social/assets/css/font-awesome.css' rel='stylesheet'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Sekian, semoga bermanfaat...

Read more

Cara Membuat Menu Vertikal Sidebar Blogger HTML 5 CSS3

Pada kesempatan kali ini saya akan share vertikal menu menggunakan CSS3 and HTML5 yang keren tentunya. Contohnya seperti gambar diatas. Mari, langsung saja gan, disimak ya...

Duplicat atau centang expand template dulu ya, sekedar jaga-jaga aja.

1.  Letakkan kode script dibawah ini di gadget HTML kalian...

<nav id="menu">

        <ul class="parent-menu">

            <li><a href="#">Home & Kitchen</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Electronics</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul></li>

            <li><a href="#">Clothing</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul></li>

            <li><a href="#">Cars & Motorbikes</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Books</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Support</a>

                <ul>

                    <li><a href="#">Contact Us</a></li>

                    <li><a href="#">Forum</a></li>

                    <li><a href="#">Deliveries</a></li>

                    <li><a href="#">T&C</a></li>

                </ul>

            </li>

        </ul>

    </nav>

2. Save/Simpan

3. Masuk Blogger edit HTML kalian lalu Cari kode ]]:</skin> dan paste kode dibawah ini tepat dibawahnya.

p, ul, li, div, nav
        {

            padding:0;
            margin:0;
        }


        body
        {
            font-family:Calibri;
        }


        #menu {
            overflow: auto;
            position:relative;
            z-index:2;
        }


        .parent-menu {
            background-color: #0c8fff;
            min-width:200px;
            float:left;
        }


        #menu ul
        {
            list-style-type:none;
        }


        #menu ul li a
        {

            padding:10px 15px;
            display:block;
            color:#fff;
            text-decoration:none;
        }


            #menu ul li a:hover
            {
                background-color:#007ee9;

            } 

#menu ul li:hover > ul {

                left: 200px;

                -webkit-transition: left 200ms ease-in;

                -moz-transition: left 200ms ease-in;

                -ms-transition: left 200ms ease-in;

                transition: left 200ms ease-in;

            }


            #menu ul li > ul {

                position: absolute;

                background-color: #333;

                top: 0;

                left: -200px;

                min-width: 200px;

                z-index: -1;

                height: 100%;

                -webkit-transition: left 200ms ease-in;

                -moz-transition: left 200ms ease-in;

                -ms-transition: left 200ms ease-in;

                transition: left 200ms ease-in;

            }


            #menu ul li > ul li a:hover

            {

                background-color:#2e2e2e;

            }

4. Klik save/simpan

5. Selesai

Sekian artikel ini dibuat untuk berbagi saja...

Read more