Tip CSS : การสร้าง menu Css โดยไม่ใช้ Class Bootstrap

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
pnut
PHP Super Member
PHP Super Member
โพสต์: 488
ลงทะเบียนเมื่อ: 08/08/2016 10:48 am

Tip CSS : การสร้าง menu Css โดยไม่ใช้ Class Bootstrap

โพสต์โดย pnut » 03/11/2016 7:45 pm

Tip CSS : การสร้าง menu Css โดยไม่ใช้ Class Bootstrap
1.ให้สร้างไฟล์ HTML เพื่อทำการสร้างเมนู CSS โดยเพิ่มโค้ดดังนี้

โค้ด: เลือกทั้งหมด

<nav id="nav" role="navigation">
            <ul>
                <li><a href="?home">Home</a></li>
                <li>
                    <a href="?blog" aria-haspopup="true"><span>Blog</span></a>
                </li>
                <li>
                    <a href="?work" aria-haspopup="true"><span>Work</span></a>                   
                </li>
                <li><a href="?about">About</a></li>
            </ul>
        </nav>

2.เมื่อเราทำการบันทึกแล้วรันออกมายังไม่เป็นเมนูตามที่เราต้องการ เราจะต้องเพิ่มโค้ด CSS ให้สวยงามซะก่อน ถ้าเราไม่เพิ่ม CSS เมนูก็จะเป็นดังรูป
01.jpg
01.jpg (13.53 KiB) เปิดดู 261 ครั้ง

3.ทำการเพิมโค้ด CSS เพื่อทำให้เมนูเป็นเรียงกันเป็นแนวนอน ดังงนี้

โค้ด: เลือกทั้งหมด

#nav > ul > li {
    width: 25%;
    height: 100%;
    float: left;
}

อธิบาย: กำหนดให้ #nav > ul > li มีขนาดความกว้าง 25% ,ให้มีความสูงขนาด 100%และสั่งให้ลอยชิดซ้าย เมื่อทำการ Run ออกมาแล้วจะได้ดังรูป
02.jpg

4.เมื่อทำการแสดงผลจากข้อ 3 แล้ว จะเห็นได้ว่าตัวหนังสือของเมนูของเรายังเล็กเกินไป ดังนั้นเราจึงจะมาทำให้ตัวหนังสือใหญ่กันนะคับ โดยเพิ่มแท็ก CSS ดังนี้

โค้ด: เลือกทั้งหมด

#nav > ul > li > a {
    height: 100%;
    font-size: 1.5em;
    line-height: 2.5em;
    text-align: center;
}

5.จากนั้นให้ทำการ Run จะพบได้ว่าตัวหนังสือของเมนูก็ได้เพิ่มใหญ่ขึ้นมาแล้วนะครับ ดังผลลัพธ์ดังรูป
03.jpg

6.จากนั้นเมื่อเราต้องการให้เมนูของเราเป็นสีตามที่ต้องการก็ให้เพิ่มโค้ด CSS ดังนี้

โค้ด: เลือกทั้งหมด

#nav > ul {
    height: 3.75em;
    background-color: #e15a1f;
}

อธิบาย : การกำหนดให้แท็ก ul ที่อยู่ภายใต้ ไอดี nav นั้นให้มีความสูง 3.75em และกำหนดสีเป็นโค้ดสี #e26a1f สีส้มนั้นเองหรือเพื่อนต้องการให้เป็นสีตามที่เพื่อนๆต้องการได้นะครับโดยผลลัพธ์จะเป็นดังนี้
04.jpg

7.จะเห็นได้ว่าเมนูของเรายังมีข้อหัวที่เป็นจุดสีดำทำให้เมนูของเราไม่มีความสวย ดังนั้นเราจะนำตัวที่เป็นจุดสีดำออกโดยทำการเพิ่มโค้ด CSS ดังนี้
ul, ol {
list-style: none;
}
8.เมื่อทำการเพิ่มโค้ด CSS แล้วเราก็จะได้ผลลัพธ์ดังนี้
05.jpg
05.jpg (11.35 KiB) เปิดดู 261 ครั้ง

9.โดยเมนูของเรายังจัดไม่เป็นสัดส่วนเมนูยังชิดทางด้านซ้ายมืออยู่ โดยเราจะทำให้ข้อความเมนูจัดให้อยู่ตรงกลางและเป็นสัดส่วนให้มากกว่านี้โดยให้เพิ่มโค้ด CSS ดังนี้

โค้ด: เลือกทั้งหมด

#nav li a {
    color: #fff; /* สีข้อความของเมนู*/
    display: block;
}

10.เมื่อเราทำการเพิ่มโค้ด CSS แล้วให้ทำการ Run แล้วจะได้ผลดังนี้
06.jpg

11.โดยขั้นตอนต่อไปเราจะทำการสร้างเมนูฝั่งหน้ามือถือ Reponsive web โดยให้เพิ่มโค้ด HTML ภายใต้ <nav> ดังนี้

โค้ด: เลือกทั้งหมด

<a href="#nav" title="Show navigation">Show navigation</a>
         <a href="#" title="Hide navigation">Hide navigation</a>

12.ให้เพิ่มโค้ด CSS เพื่อทำการปรับหน้ามือถือ Reponsive web

โค้ด: เลือกทั้งหมด

@media only screen and ( max-width: 640) /* การกำหนดให้เฉพาะขนาดหน้าจอ 640px */
      {
         html
         {
            font-size: 75%; /* 12 */
         }

         #nav
         {
            position: relative;
            top: auto;
            left: auto;
         }
            #nav > a
            {
               width: 3.125em; /* 50 */
               height: 3.125em; /* 50 */
               text-align: left;
               text-indent: -9999px;
               background-color: #e15a1f;
               position: relative;
            }
               #nav > a:before,
               #nav > a:after
               {
                  position: absolute;
                  border: 2px solid #fff;
                  top: 35%;
                  left: 25%;
                  right: 25%;
                  content: '';
               }
               #nav > a:after
               {
                  top: 60%;
               }

            #nav:not( :target ) > a:first-of-type,
            #nav:target > a:last-of-type
            {
               display: block;
            }


         /* first level */

         #nav > ul
         {
            height: auto;
            display: none;
            position: absolute;
            left: 0;
            right: 0;
         }
            #nav:target > ul
            {
               display: block;
            }
            #nav > ul > li
            {
               width: 100%;
               float: none;
            }
               #nav > ul > li > a
               {
                  height: auto;
                  text-align: left;
                  padding: 0 0.833em; /* 20 (24) */
               }
                  #nav > ul > li:not( :last-child ) > a
                  {
                     border-right: none;
                     border-bottom: 1px solid #cc470d;
                  }


            /* second level */

            #nav li ul
            {
               position: static;
               padding: 1.25em; /* 20 */
               padding-top: 0;
            }
      }

13.โดยเราก็จะได้ผลลัพธ์ดังนี้
07.jpg
07.jpg (13.82 KiB) เปิดดู 261 ครั้ง

14.ขั้นตอนต่อไปเราจะทำเมนู Dropdown hover โดยให้เพิ่มโค้ด html
15.ทำการเพิ่มโค้ด CSS ดังนี้

โค้ด: เลือกทั้งหมด

#nav li ul {
    background-color: #cc470d;
    display: none;
    position: absolute;
    top: 100%;
}
#nav li {
    position: relative;
}
#nav > ul > li:hover > a,
        #nav > ul:not( :hover ) > li.active > a
        {
            background-color: #cc470d;
        }
#nav li:hover ul
        {
            display: block;
            left: 0;
            right: 0;
        }
#nav li ul a {
    font-size: 1.25em;
    border-top: 1px solid #e15a1f;
    padding: 0.75em;
}

16.ก็จะได้ผลลัพธ์ดังนี้
09.jpg

toonytoony2004
PHP Hero Member
PHP Hero Member
โพสต์: 102
ลงทะเบียนเมื่อ: 27/07/2013 9:29 am

Re: Tip CSS : การสร้าง menu Css โดยไม่ใช้ Class Bootstrap

โพสต์โดย toonytoony2004 » 05/11/2016 8:24 am

ขออนุญาตถามต่ออีกนิดครับว่า ถ้าอยากให้แสดงผลเป็นตำแหน่งโมดูลเพื่อใช้ใน joomla ต้องเพิ่มโค้ดส่วนไหน อย่างไรครับ

ขอบคุณครับ



  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน