Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make responsive navigation pure CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 752
    Comment on it

    Hello folks,

    Here is an example of responsive navigation without javascript using pure css.

    HTML:-

    <nav>
        <a href="#" class="logoNAv">Logo </a>
        <input type="checkbox" id="nav" /><label for="nav"></label>
        <ul>
            <li><a href="#">Menu item 1</a></li>
            <li><a href="#">Menu item 2</a>
                <ul>
                    <li><a href="#">Sub menu 1</a></li>
                    <li><a href="#">Sub Menu 2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Menu item 3</a>
            </li>
            <li>
                <a href="#">Menu item 4</a>
            </li>
            <li>
                <a href="#">Menu item 5</a>
            </li>
        </ul>
    </nav>
    

    CSS:-

    * {box-sizing: border-box;margin: 0;padding: 0;}
    .logoNAv {color: #fff !important;;display: inline-block;font-size: 18px;font-weight: 800;padding: 7px 0 0 13px;text-decoration: none;}
    nav{position: relative;background: #0b82c0;min-height: 40px;}
    nav > ul {float: right;padding:0;margin:0;}
    nav > ul > li {text-align: center;line-height: 40px;padding: 0 10px;}
    nav > ul li ul li {width: 100%;text-align: left;}
    nav ul li:hover {cursor: pointer;position: relative;}
    nav ul li:hover > ul {display: block;}
    nav ul li:hover > a {color: #fff;}
    nav > ul > li > a {cursor: pointer;display: block;outline: none;width: 100%;text-decoration: none;color:#fff !important;}
    nav > ul > li {float: left;list-style: none;}
    nav a {color: white;}
    nav > ul li ul {display: none;position: absolute;left: 0;top: 100%;width: 170px;z-index: 2000;background: #4b98c0;padding: 0;}
    nav ul li ul li{list-style: none;padding-left: 20px;}
    nav ul li:hover{background: #3387b3;}
    nav > ul li ul li > a {text-decoration: none;}
    [type="checkbox"], label {display: none;}
    @media screen and (max-width: 768px) {
    nav ul{display: none;}
    label {    display: block; background: #4b98c0;width: 40px;    height: 40px;   cursor: pointer;position: absolute;right: 00px; top: 0px;} 
    label:after{content:'';display: block;width: 30px;height: 5px;background: #fff;margin: 7px 5px;box-shadow: 0px 10px 0px #fff, 0px 20px 0px #fff}
    [type="checkbox"]:checked ~ ul {    z-index: 9999;  position: absolute;right: 0px;left: 0px;top:40px;display: block;}
    nav a {color: #fff;}
    nav ul li {display: block;    float: none;    width: 100%;    text-align: left;   background: #4b98c0;text-indent: 20px;}
    nav > ul > li {    margin-left: 0px;   padding: 0;}
    nav > ul li ul li {    display: block;float: none;}
    nav > ul li ul {display: block;    position: relative; width: 100%;z-index: 9999;float: none;}}
    

    Output- Below is the output generated by using above code

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: