CSS Menu #22 - Code Example

Demo

5.96 KB
HTML, CSS
Menu
dropdown, vertical
MIT License

Code
Editor

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
<nav id="vertical-menu">
    <ul class="main-menu">
        <li class="active">
            <a href="#"><i class="fa fa-envelope"></i>Link Item 1</a>
        </li>
        <li class="contain-submenu">
            <a href="#"><i class="fa fa-desktop"></i>Link Item 2 </a>
            <ul class="submenu-1">
                <li><a href="#">Submenu item 1</a></li>
                <li class="contain-submenu">
                    <a href="#">Submenu item 2</a>
                    <ul class="submenu-2">
                        <li><a href="#">Submenu item 2.1</a></li>
                        <li><a href="#">Submenu item 2.2</a></li>
                        <li><a href="#">Submenu item 2.3</a></li>
                        <li><a href="#">Submenu item 2.4</a></li>
                        <li><a href="#">Submenu item 2.5</a></li>
                    </ul>
                </li>
                <li><a href="#">Submenu item 3</a></li>
                <li><a href="#">Submenu item 4</a></li>
                <li><a href="#">Submenu item 5</a></li>
            </ul>
        </li>
        <li>
            <a href="#"><i class="fa fa-cog"></i>Link Item 3</a>
        </li>
        <li class="contain-submenu">
            <a href="#"><i class="fa fa-book"></i>Link Item 4</a>
            <ul class="submenu-1">
                <li><a href="#">Submenu item 1</a></li>
                <li><a href="#">Submenu item 2</a></li>
                <li class="contain-submenu">
                    <a href="#">Submenu item 3</a>
                    <ul class="submenu-2">
                        <li><a href="#">Submenu item 3.1</a></li>
                        <li class="contain-submenu">
                            <a href="#">Submenu item 3.2</a>
                            <ul class="submenu-3">
                                <li><a href="#">Submenu item 3.2.1</a></li>
                                <li><a href="#">Submenu item 3.2.2</a></li>
                                <li><a href="#">Submenu item 3.2.3</a></li>
                                <li><a href="#">Submenu item 3.2.4</a></li>
                                <li><a href="#">Submenu item 3.2.5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Submenu item 3.3</a></li>
                        <li><a href="#">Submenu item 3.4</a></li>
                    </ul>
                </li>
                <li><a href="#">Submenu item 4</a></li>
                <li><a href="#">Submenu item 5</a></li>
            </ul>
        </li>
        <li>
            <a href="#"><i class="fa fa-graduation-cap"></i>Link Item 5</a>
        </li>
        <li>
            <a href="#"><i class="fa fa-search"></i>Link Item 6</a>
        </li>
    </ul>
</nav>

CSS

ul,
li,
nav,
a {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    font-family: helvetica;
}
#vertical-menu {
    margin-top: 20px;
    display: inline-block;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;
    background: #f62459;
    margin-left: 20px;
}
.main-menu {
    display: inline-block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.main-menu li {
    position: relative;
    height: 50px;
    -webkit-box-shadow: 0 -1px 0 0 #444, 0 -2px 0 0 #222;
    -moz-box-shadow: 0 -1px 0 0 #444, 0 -2px 0 0 #222;
    box-shadow: 0 -1px 0 0 #444, 0 -2px 0 0 #222;
}
.main-menu > li > a > i {
    color: #db0a5b;
    width: 2em;
    height: 100%;
    line-height: 50px;
    text-align: left;
}
.main-menu > li:first-child,
.submenu-1 > li:first-child,
.submenu-2 > li:first-child,
.submenu-3 > li:first-child {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.main-menu > li:first-child > a,
.submenu-1 > li:first-child > a,
.submenu-2 > li:first-child > a,
.submenu-3 > li:first-child > a {
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
.main-menu > li:last-child > a,
.submenu-1 > li:last-child > a,
.submenu-2 > li:last-child > a,
.submenu-3 > li:last-child > a {
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}

.main-menu > li > a,
.submenu-1 > li > a,
.submenu-2 > li > a,
.submenu-3 > li > a {
    color: #d2527f;
    background: #2a2a2a;
    line-height: 50px;
    display: block;
    padding: 0 1em;
}

.submenu-1,
.submenu-2,
.submenu-3 {
    position: absolute;
    white-space: nowrap;
    top: -9999px;
}
.contain-submenu > a:first-child::after {
    content: " \f054";
    padding-left: 1em;
    font-family: "FontAwesome";
}
/* revealing submenus */
.main-menu > li:hover .submenu-1,
.submenu-1 > li:hover .submenu-2,
.submenu-2 > li:hover .submenu-3 {
    top: 0;
    left: 100%;
    -webkit-transition: top 0.5s cubic-bezier(0.38, 0.82, 0.79, 0.93);
    -o-transition: top 0.5s cubic-bezier(0.38, 0.82, 0.79, 0.93);
    -moz-transition: top 0.5s cubic-bezier(0.38, 0.82, 0.79, 0.93);
    transition: top 0.5s cubic-bezier(0.38, 0.82, 0.79, 0.93);
}

.main-menu > li:hover > a {
    color: #22af70;
}
.submenu-1 li:hover > a {
    color: #22a7f0;
}
.submenu-2 li:hover > a {
    color: #f6db7f;
}
.submenu-3 li:hover > a {
    color: #f2784b;
}

HTML
CSS

Imagine we’re walking through a vibrant, bustling digital marketplace, where every stall and shop is a webpage, beautifully styled and inviting. In this world, our guide is a piece of code, like the one you’re curious about, which crafts a navigation menu — a map to this marketplace. This menu isn’t just a list; it’s a multi-level, dynamic experience, guiding users through the various sections of the site with ease and elegance.

At the heart of our navigation menu, we start with HTML, the bricks and mortar of our digital storefront. We have a list within a list, structured like a family tree, where each branch leads to different sections of the website. Imagine each list item as a signpost, directing us to different attractions: emails, desktops, settings, books, and more, each represented by iconic symbols thanks to FontAwesome, a toolkit that provides us with crisp, scalable icons.

But a beautiful structure isn’t enough. We need style, the paint and decoration of our shop, which is where CSS comes into play. It ensures our menu is not just functional but visually appealing. It’s like choosing the colors for our signposts, the shape of our banners, ensuring they’re not just visible but inviting. Our menu gets a vibrant background, the signposts are carefully spaced and adorned with shadows to stand out, and the icons gleam with specific colors that change as you, the visitor, show interest by hovering over them. It’s a dynamic interaction, making the exploration of the digital marketplace not just a task, but an experience.

And then, there’s the magic—CSS transitions. These aren’t just static signposts; they’re interactive, revealing hidden paths (submenus) when approached. The transition effect makes this revelation smooth, like a curtain being drawn aside to reveal a previously hidden alleyway, enhancing the exploratory joy.

This piece of code isn’t just about guiding users through a website. It’s about creating an immersive, intuitive journey, making the vast digital marketplace not just navigable but enjoyable to explore. Through clever structure, styling, and interactivity, it transforms the mundane task of clicking through a website into a delightful stroll through a vibrant digital world.