CSS Based Multi-Branch Tree View Menu for Website

Recently I had a requirement to create a multi-branch tree view menu for website which should be completely CSS based and no single line of JS code.

I would like to share that code with you, hopefully this will help you also.

HTML Code

Here is simplest HTML code to create multi-branch tree view menu.

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Reinvent Yourself</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Vision/Mission & Core Values</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Leverage The Expertise</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Develop Human Capital</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Choose Your Talent</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Outsource Your Non-Core</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Functional Excellence</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Abide By Governance</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Safety/Environmental & CSR</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/album/">Album</a></li>
        <li><a href="/contact">Contact Us</a></li>
    </ul>
</nav>

CSS Code

Here is the simplest possible CSS code.

nav {
    text-align: left;
}

    nav ul ul {
        display: none;
        z-index: 99;
    }

    nav ul li:hover > ul {
        display: block;
    }


    nav ul {
        background: url(../images/nav_bg.jpg) repeat-x;
        list-style: none;
        position: relative;
        display: inline-table;
    }

        nav ul:after {
            content: "";
            clear: both;
            display: block;
        }

        nav ul li {
            float: left;
            z-index: 99;
        }

            nav ul li:hover {
                background: #210300;
            }

                nav ul li:hover a {
                    color: #fff;
                }

            nav ul li a {
                display: block;
                padding: 13px 69px;
                color: white;
                text-decoration: none;
            }


        nav ul ul {
            background: #5f6975;
            border-radius: 0px;
            padding: 0;
            position: absolute;
            top: 100%;
        }

            nav ul ul li {
                float: none;
                position: relative;
            }

                nav ul ul li a {
                    padding: 13px 40px;
                    color: white;
                    background: url(../images/nav_bg.jpg) repeat-x;
                   
                }

                    nav ul ul li a:hover {
                        background: #210300;
                    }

            nav ul ul ul {
                position: absolute;
                left: 100%;
                top: 0;
            }


If you want, check out the working example, here is https://jsfiddle.net/31rxbq61/embedded/result/

Hope this helps.

Comments

Popular posts from this blog