รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การทำเมนู responsive อย่างง่าย !!!

    ในการทำเว็บไซต์แบบ responsive หลายคนน่าจะเคยเจอมาเหมือนๆ กัน คือ ใช่ bootstrap ในการทำ แต่ว่าในบางอย่าง บางเรื่องการใช้ bootstrap ทำกลับเป็นเรื่องที่ยุ่งยาก เช่น การทำเมนูย่อ ขยายตามหน้าจอ โดยเมนูไม่ได้อยู่ที่ส่วนบนสุดของเว็บไซต์ แบบนี้การใช้ bootstrap ทำจะยากขึ้นมาทันที

     

    Code ส่วน CSS ไฟล์ style.css

    ul{
            display:block;
    }
    li{
        display:inline-block;
        float:left;
        width:20%;
        background-color:#33FF66;
        text-align:center;
    }

    li:hover{
        background-color:#F90;
    }
    .menu{display:none; cursor:pointer; background-color:#333; width:30px;}

    .navigation{width:80%; margin-left:auto; margin-right:auto;}

    @media(max-width:768px){
        span.menu{display:block;}
        li{    width:100%;}
        ul{
            display:none;
        }
    }

    @media(max-width:1500px){
        ul{
            display:block;
        }
        .menu{display:none;}
    }

     

    Code ส่วน HTML ไฟล์ index.html

    <!DOCTYPE HTML>
    <html>
    <head>
    <title></title>

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="js/jquery-1.11.0.min.js"></script>

    </head>
    <body>

                    <div class="navigation">
                        <span class="menu"><img src="images/icon.png" alt=""/></span>
                        <ul class="res" >
                            <li><a href="index.html" class="active hvr-sweep-to-bottom">Home</a></li>
                            <li><a class="hvr-sweep-to-bottom" href="about.html">About</a></li> 
                            <li><a class="hvr-sweep-to-bottom" href="typo.html">News</a></li>
                            <li><a class="hvr-sweep-to-bottom" href="gallery.html">Gallery</a></li>
                            <li><a class="hvr-sweep-to-bottom" href="contact.html">Contact</a></li>
                         </ul>
                         <div class="clearfix"></div>
                         <script>
                           $( "span.menu" ).click(function() {
                             $( "ul.res" ).slideToggle( 300, function() {
                             });
                             });
                        </script>
                    </div>
               

    </body>
    </html>

     

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com