Looking for startup ideas.? Visit Reinventor.ca

Multi Level Vertical menus with Icons for Blogger /Website

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBOzFx2jIE_L-LFqYSFF6mxngXSOi6sT1GTOkz9f5DNLQyxsJO223QLQDSUS9avKUuyLVY1jWKqKcZX0LG2LRK-rQ3APbVnm8LWf4Las9bR765BtGcQAQ-n8W4nRv3RmETVKlqf-6bxvY/s1600/ds.jpg

       Original http://www.script-tutorials.com/

POST UPDATED
Here is an interesting tutorial from script-tutorials website.The whole source of HTML and CSS is originally picked from script-tutorials. In our new tutorial we will create a cool CSS3 vertical menu with icons in metal style. The submenu will be opened by pressing the main menu items.

Installtion 

Go to blogger dashboard -> respective Blog's layout -> Add a new Widget -> HTML/JAVASCRIPT -> Copy the below code

<ul id="nav">
                <li><a href="#"><img src="http://www.script-tutorials.com/demos/162/images/t2.png" /> Home</a></li>
                <li><a href="#" class="sub" tabindex="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsRC8Fd4Yhow9LtrRpzUrIsZ8xarFOs3HNLrdEOM6TT46wbQ0XcJJ-EX25VcAGspbE4kP8ZFFJRfvSjjQklBzax-qXN9FD9MHfekF_SV_R2f40y11rTWC_fJTvpjR8YdO3ar0M-5mivnnY/s1600/Folders-OS-Windows-8-Metro-icon.png" />Windows 8.1</a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNWBRUpYsxOGbB3x2_6Vt6clWzNuRir7DRJx80kkTnOMLB4mpn2lsVKNekBs_nA_WiZg6-P1gZ7NavAS9GgvA1E8Q1egB_bMpjBtfC7Z8k4BaXcEUdDxSZ5is9y2Z_7K8IstWIHwQK6vGB/s1600/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8yP1vA8Krsphyphenhyphen63WJTIK_O2p2MykeuRMKH_686XsjO8dol2GYAL87zmbW91nJNlensKh2e9o53v74PaRwIC4lozKKl3_vJtXoDuX-x0K1Gy_ty0ia3qC63hrKV6RnED5iMu5r_Utbu8a/s1600/t3.png" />News</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8yP1vA8Krsphyphenhyphen63WJTIK_O2p2MykeuRMKH_686XsjO8dol2GYAL87zmbW91nJNlensKh2e9o53v74PaRwIC4lozKKl3_vJtXoDuX-x0K1Gy_ty0ia3qC63hrKV6RnED5iMu5r_Utbu8a/s1600/t3.png" />Software</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8yP1vA8Krsphyphenhyphen63WJTIK_O2p2MykeuRMKH_686XsjO8dol2GYAL87zmbW91nJNlensKh2e9o53v74PaRwIC4lozKKl3_vJtXoDuX-x0K1Gy_ty0ia3qC63hrKV6RnED5iMu5r_Utbu8a/s1600/t3.png" />Games</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8yP1vA8Krsphyphenhyphen63WJTIK_O2p2MykeuRMKH_686XsjO8dol2GYAL87zmbW91nJNlensKh2e9o53v74PaRwIC4lozKKl3_vJtXoDuX-x0K1Gy_ty0ia3qC63hrKV6RnED5iMu5r_Utbu8a/s1600/t3.png" />Icons</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8yP1vA8Krsphyphenhyphen63WJTIK_O2p2MykeuRMKH_686XsjO8dol2GYAL87zmbW91nJNlensKh2e9o53v74PaRwIC4lozKKl3_vJtXoDuX-x0K1Gy_ty0ia3qC63hrKV6RnED5iMu5r_Utbu8a/s1600/t3.png" />System Tools</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sub" tabindex="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0aUVcbaI4c5ZxoaNWG-ZJFm81C7bWdIheMtpx-yHzglPyjnNLH_yQFUJ4NXRItVX0hDqz_cu_Ih3KBlCx2TstfQE3ILx4wE0TCB1euLa6QBNKht5wmO4U4gOsbU5gjZEyci4Ei0Ehmtgn/s1600/android-icon.png" />Android</a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNWBRUpYsxOGbB3x2_6Vt6clWzNuRir7DRJx80kkTnOMLB4mpn2lsVKNekBs_nA_WiZg6-P1gZ7NavAS9GgvA1E8Q1egB_bMpjBtfC7Z8k4BaXcEUdDxSZ5is9y2Z_7K8IstWIHwQK6vGB/s1600/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8yP1vA8Krsphyphenhyphen63WJTIK_O2p2MykeuRMKH_686XsjO8dol2GYAL87zmbW91nJNlensKh2e9o53v74PaRwIC4lozKKl3_vJtXoDuX-x0K1Gy_ty0ia3qC63hrKV6RnED5iMu5r_Utbu8a/s1600/t3.png" />Top Apps</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8yP1vA8Krsphyphenhyphen63WJTIK_O2p2MykeuRMKH_686XsjO8dol2GYAL87zmbW91nJNlensKh2e9o53v74PaRwIC4lozKKl3_vJtXoDuX-x0K1Gy_ty0ia3qC63hrKV6RnED5iMu5r_Utbu8a/s1600/t3.png" />Top Games</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8yP1vA8Krsphyphenhyphen63WJTIK_O2p2MykeuRMKH_686XsjO8dol2GYAL87zmbW91nJNlensKh2e9o53v74PaRwIC4lozKKl3_vJtXoDuX-x0K1Gy_ty0ia3qC63hrKV6RnED5iMu5r_Utbu8a/s1600/t3.png" />Social Apps</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8yP1vA8Krsphyphenhyphen63WJTIK_O2p2MykeuRMKH_686XsjO8dol2GYAL87zmbW91nJNlensKh2e9o53v74PaRwIC4lozKKl3_vJtXoDuX-x0K1Gy_ty0ia3qC63hrKV6RnED5iMu5r_Utbu8a/s1600/t3.png" />Media Apps</a></li>
                        <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8yP1vA8Krsphyphenhyphen63WJTIK_O2p2MykeuRMKH_686XsjO8dol2GYAL87zmbW91nJNlensKh2e9o53v74PaRwIC4lozKKl3_vJtXoDuX-x0K1Gy_ty0ia3qC63hrKV6RnED5iMu5r_Utbu8a/s1600/t3.png" />Updates</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizaGCadYyTdcxUV8yhAMJ1-6qc4scBVKuP4unMdZ-5VmPZnrypcmslqH6RnP3thAIGnEMgMKoIIjIPI03tHxEDajFS99K_yyRjv4P-GsrWcA27gNeLRYGc-OrWbB3MfHWl-szJ_yEldqwa/s1600/Folders-OS-Apple-Metro-icon.png" />Apple</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQCZHBxzRhbAxNrCheqABYFqsgJ7ebrtDqx72Y6Tvo7aEhG5r_xvcwAYv6XeI3X7Ho4NEaK2QHuWLPdDLt0Uc9YMB7w8bRdpyu9TXogo_pvuPCwGvYzZOPRLMO2A5-K4dBBE6nINzgdgKt/s1600/Web-Facebook-alt-3-Metro-icon.png" />Facebook</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1TnMTqlS4O7lbZZAqEl9kZI6_a6V_b1do891uOQWPNl_ca6IqyrHimSq0d9BdDXB1CjKfxBCYB8CDREWdkYgtiFM3Ym17Tqy8bMH28uVGZknL381EqE8cklfbWH5_i0_9xzilkCloEVXF/s1600/Web-Google-plus-alt-Metro-icon.png" />Google+</a></li>
            </ul>

        

<style>
#nav {
    border:3px solid #3e4547;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:100%;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;
padding: 0 !important;
    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
}
#nav li a.sub {
    background:#d4d5d8 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2FdtI7MCoQWo_CDyQbK8gqZaotiu2uSx_u30rtSNdx9AK7LMNQlscLRe1UfAiqhi7F7PmgE0VckekiSo0nTZePg30s9PszQUs6asF-3m71-vGzd0QAE4rGCj-abNxrZomfsrQbaGA8HYI/s1600/down.gif") no-repeat;
}
#nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
}
#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    background-color:#bcbdc1;
}
#nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}
#nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}
#nav ul li:nth-child(odd) a img {
    background:url("../images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;

    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    background:#bcbdc1;
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover li {
    margin-top:0;
}
</style>
Save Widget

Conclusion

Hope you enjoyed with our new vertical menu, don’t forget to tell thanks and leave a comment :) Good luck!

Share this:

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible

0 comments:

Post a Comment