สร้างเมนูแบบเคลื่อนไหวสุดเจ๋งด้วย CSS3 แท้ๆ

Published on: Nov 12 2012 by soraya


แนะนำ jQuery มาแยะแล้ววันนี้มาดูการทำเมนูกันบ้างครับโดยเทคนิคที่เอามาให้ดูวันนี้เป็น CSS3 และ การใช้ JavaScript และ HTML5 เพื่อให้การทำงานบน IE ได้อย่างสมบูรณ์วันนี้ก็ไม่นากครับเพียวแค่แม่นูแต่รูปแบบและเทคนิคที่ใช้น่าสนใจกว่าที่ใช้ภาษาที่ลองรับการทำงานได้ทุกบราวเซอร์และรูปแบบที่กำหนดโดย css จึงทำให้ง่ายต่อการแก้ไขและใช้งานดีครับเรามาดูกันเลยดีกว่า

index.html โค้ดหน้าตาเมนูโดยใช้ HTML5 ในการเขียนครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< !DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <!-- Including the Lobster font from Google's Font Directory -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
        <!-- Enabling HTML5 support for Internet Explorer -->
        <!--[if lt IE 9]>
         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
       < ![endif]-->
    </head>
    <body>
        <header>
            <h1>CSS3 Animated Navigation Menu</h1>
            <h2>&laquo; Read and download on Tutorialzine</h2>
        </header>
        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="#home" class="homeIcon">Home</a></li>
                <li id="news"><a href="#news">News</a></li>
                <li id="about"><a href="#about">About us</a></li>
                <li id="services"><a href="#services">Services</a></li>
                <li id="contact"><a href="#contact">Contact us</a></li>
            </ul>
        </nav>
        <footer>Looks best in Firefox 4, usable everywhere.</footer>
    </body>
</html>


จะเห็นได้ว่ามีการใช้ สไตล์จาก Google APIs ที่มีมากกว่า 100 แบบที่นักพัมนาทั้วทั้งโลกใช้มากและส่วนใช้นักพัฒนาเดียวนี้จะอิง font จาก สไตล์จาก Google APIs เป็นหลักซะส่วนใหญ่แล้ว และจะมีส่วนของ header, nav และ footer ซึ่งเป็นแท็กของ HTML5 และองค์ประกอบ UL ภายในแท็ก NAV นี้เป็นเมนูนำทางของเรา



CSS


จะสังเกตุได้ว่าเมนูที่เราสร้างจะมีเพียงรูปปุ่มที่เป็นรูปบ้านที่เราใช้ ไฟล์ภาพแบบ .png ซึ่งจะทำให้พื้นหลังโปร่งใสแต่ที่เหลือเป็นการใช้เทคนิคของ css ในการไล่สีให้สวยงามมากที่สุด และเบราว์เซอร์ที่ให้การสนับสนุนเมนูทำงานในรุ่นล่าสุดของ Firefox, Chrome, Safari และ Opera ในขณะที่ IE มันยังคงเป็นเช่นเดิมที่จะสามารถแสดงผลได้ตั้งแต่รุ่น 7 เป็นต้นไป แต่จะดูดีที่สุดใน Firefox 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.fancyNav{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}
.fancyNav li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    border-right: 1px solid rgba(9, 9, 9, 0.125);
    /* Adding a 1px inset highlight for a more polished efect: */
    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    position:relative;
    float: left;
    list-style: none;
}


สังเกตุโค้ด CSS3 gradient syntaxes จะเป็นการสนับสนุน Firefox, Chrome และ Safari ในการไล่ระดับสีและกับ Opera และ IE 10 (ปัจจุบันอยู่ในโหมดแสดงตัวอย่างแพลตฟอร์ม) แต่ถ้าเป็น Firefox ได้รับการยอมรับในฐานะมาตรฐานอุตสาหกรรมของในแสดงผลของตัวอักษร

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.fancyNav li:after{
    /* This creates a pseudo element inslide each LI */
    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;
    /* Gradients! */
    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    /* This will create a smooth transition for the opacity property */
    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}


จาก css ด้านบนจะเป็นส่วนของการกำหนดการไล่สีที่เป็นเงาดำเมื่อเราเอาเมาส์ไปคลิกหรือลากผ่านนั้นเอง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Treating the first LI and li:after elements separately */
.fancyNav li:first-child{
    border-radius: 4px 0 0 4px;
}
.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    border-radius:4px 0 0 4px;
}
.fancyNav li:last-child{
    border-radius: 0 4px 4px 0;
}
/* Treating the last LI and li:after elements separately */
.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    border-radius:0 4px 4px 0;
}
.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
    /* This property triggers the CSS3 transition */
    opacity:1;
}
1
2
3
4
5
6
7
8
9
.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}
.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
    opacity:1 !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Styling the anchor elements */

.fancyNav li a{
    color: #5d5d5d;
    display: inline-block;
    font: 20px/1 Lobster,Arial,sans-serif;
    padding: 12px 35px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}

.fancyNav a.homeIcon{
    background:url('../img/home.png') no-repeat center center;
    display: block;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    text-indent: -9999px;
    width: 16px;
}


เป็นการดำหนดรูปแบบขององค์ประกอบสไตล์ที่อยู่ใน li

ดาวน์โหลด…..!!!



ขอบคุณข้อมูลจาก http://tutorialzine.com

Comments

comments

Powered by Facebook Comments

Filed under: CSS
Tags: , , , , ,