News
IBM to offer mobile security as a service IBM will start delivering mobile security-as-a-service (MaaS) through its own cloud infrastructure in India, a move that is expected to better address in-country data requirements... IBM Spectrum Computing: IBM has enlarged its portfolio of software-defined infrastructure solutions with cognitive features for workload management.  * LiFi internet technology has been introduced, the new type of wireless internet connection that gives 100 times faster than traditional WiFi -- Invented by Professor Harald Haas from the University of Edinburgh. * Sci. Rachid Yazami has developed a smart chip that charges smartphones in less than 10 minutes. BenQ has launched BlueCore projector - Consumer electronics major BenQ has launched its first BlueCore laser light source projector. For those unaware, devices with BlueCore laser technology have a high contrast output of 80000:1 with an extended lamp life and efficiency. *** 
  Apr 5 2015 11:16PM     John
  0 Comments    1100 Views  
Here John gave such a good explanation with example and Demo for Responsive menu Using CSS.
HTML

<html>
<body>
    <nav class="clearfix">
    <a href="#" id="pull">Menu</a>
<ul class="clearfix">
<li><a href="#">The</a></li>
<li><a href="#">Developer</a></li>
<li><a href="#">Tips</a></li>
<li><a href="#">Beyond</a></li>
<li><a href="#">The</a></li>
<li><a href="#">Knowledge</a></li>
</ul>
</nav>
</body>
</html>
Java Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
        $(function () {
            var pull = $('#pull');
            menu = $('nav ul');
            menuHeight = menu.height();

            $(pull).on('click', function (e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(window).resize(function () {
                var w = $(window).width();
                if (w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
    </script>
CSS

    <style type="text/css">
        /* Basic Styles */
        body
        {
            background-color: white;
        }

        nav
        {
            height: 40px;
            width: 100%;
            background: #ddd;
            font-size: 11pt;
            font-family: 'PT Sans' , Arial, sans-serif;
            font-weight: bold;
            position: relative;
            border-bottom: 2px solid #d2d1d0;
        }

        nav ul
        {
            padding: 0;
            margin: 0 auto;
            width: 600px;
            height: 40px;
        }

        nav li
        {
            display: inline;
            float: left;
        }

        nav a
        {
            color: #666;
            display: inline-block;
            width: 100px;
            text-align: center;
            text-decoration: none;
            line-height: 40px;
        }

        
        nav li:last-child a
        {
            border-right: 0;
        }

        nav a:hover, nav a:active
        {
            background-color: #81B441;
        }

        nav a#pull
        {
            display: none;
        }

        
        /*Styles for screen 600px and lower*/
        @media screen and (max-width: 600px)
        {
            nav
            {
                height: auto;
            }

            nav ul
            {
                width: 100%;
                display: block;
                height: auto;
            }

            nav li
            {
                width: 50%;
                float: left;
                position: relative;
            }

            nav li a
            {
                border-bottom: 1px solid #576979;
                border-right: 1px solid #576979;
            }

            nav a
            {
                text-align: left;
                width: 100%;
                text-indent: 25px;
            }

        }
        
        /*Styles for screen 515px and lower*/
        @media only screen and (max-width : 480px)
        {
            nav
            {
                border-bottom: 0;
            }

            nav ul
            {
                display: none;
                height: auto;
            }

            nav a#pull
            {
                display: block;
                background-color: #232323;
                width: 100%;
                position: relative;
            }

            nav a#pull:after
            {
                content: "";
                background: url('nav-icon.png') no-repeat;
                width: 30px;
                height: 30px;
                display: inline-block;
                position: absolute;
                right: 15px;
                top: 10px;
            }

        }
        
        /*Smartphone*/
        @media only screen and (max-width : 320px)
        {
            nav li
            {
                display: block;
                float: none;
                width: 100%;
            }

            nav li a
            {
                border-bottom: 1px solid #576979;
            }

        }
    </style>
Demo
Hi, This is John.I hope this page will helps you to Create Responsive using CSS.Thanks.
BackToTop
Comments



 
Search
Recent Posts
Create Amazon ElasticCache Using Memcached in CSharp
Nov 21 2017 12:09PM Posted By Amose
Get Google Map Lat Lng (Geo Point) By Pincode in C#
Nov 8 2017 10:26AM Posted By Pranav
Google URL Shortener in C#
Oct 26 2017 10:43AM Posted By Sanjay
Bind Gridview from CSV file in Asp.Net C#
Jun 18 2017 11:38PM Posted By Michael
Call WebService method from jQuery in every 1 minute
Feb 27 2017 11:51AM Posted By John
Gridview custom CSS in ASP.Net
Feb 25 2017 10:59AM Posted By Micheal Ryan
Read excel file and bind to Gridview in C#
Feb 25 2017 10:20AM Posted By Micheal
Tags
Follow us on Facebook
Follow us on Google +
Recent post in your Email inbox.
Enter your email address: