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

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

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

User avatar
pnut
PHP Super Member
PHP Super Member
Posts: 488
Joined: 08/08/2016 10:48 am

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

Post by pnut »

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

Code: Select all

<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) Viewed 2781 times
3.ทำการเพิมโค้ด CSS เพื่อทำให้เมนูเป็นเรียงกันเป็นแนวนอน ดังงนี้

Code: Select all

#nav > ul > li {
    width: 25%;
    height: 100%;
    float: left;
}
อธิบาย: กำหนดให้ #nav > ul > li มีขนาดความกว้าง 25% ,ให้มีความสูงขนาด 100%และสั่งให้ลอยชิดซ้าย เมื่อทำการ Run ออกมาแล้วจะได้ดังรูป
02.jpg
4.เมื่อทำการแสดงผลจากข้อ 3 แล้ว จะเห็นได้ว่าตัวหนังสือของเมนูของเรายังเล็กเกินไป ดังนั้นเราจึงจะมาทำให้ตัวหนังสือใหญ่กันนะคับ โดยเพิ่มแท็ก CSS ดังนี้

Code: Select all

#nav > ul > li > a {
    height: 100%;
    font-size: 1.5em;
    line-height: 2.5em;
    text-align: center;
}
5.จากนั้นให้ทำการ Run จะพบได้ว่าตัวหนังสือของเมนูก็ได้เพิ่มใหญ่ขึ้นมาแล้วนะครับ ดังผลลัพธ์ดังรูป
03.jpg
6.จากนั้นเมื่อเราต้องการให้เมนูของเราเป็นสีตามที่ต้องการก็ให้เพิ่มโค้ด CSS ดังนี้

Code: Select all

#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) Viewed 2781 times
9.โดยเมนูของเรายังจัดไม่เป็นสัดส่วนเมนูยังชิดทางด้านซ้ายมืออยู่ โดยเราจะทำให้ข้อความเมนูจัดให้อยู่ตรงกลางและเป็นสัดส่วนให้มากกว่านี้โดยให้เพิ่มโค้ด CSS ดังนี้

Code: Select all

#nav li a {
    color: #fff; /* สีข้อความของเมนู*/
    display: block;
}
10.เมื่อเราทำการเพิ่มโค้ด CSS แล้วให้ทำการ Run แล้วจะได้ผลดังนี้
06.jpg
11.โดยขั้นตอนต่อไปเราจะทำการสร้างเมนูฝั่งหน้ามือถือ Reponsive web โดยให้เพิ่มโค้ด HTML ภายใต้ <nav> ดังนี้

Code: Select all

<a href="#nav" title="Show navigation">Show navigation</a>
         <a href="#" title="Hide navigation">Hide navigation</a>
12.ให้เพิ่มโค้ด CSS เพื่อทำการปรับหน้ามือถือ Reponsive web

Code: Select all

@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) Viewed 2781 times
14.ขั้นตอนต่อไปเราจะทำเมนู Dropdown hover โดยให้เพิ่มโค้ด html
15.ทำการเพิ่มโค้ด CSS ดังนี้

Code: Select all

#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
Posts: 119
Joined: 27/07/2013 9:29 am

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

Post by toonytoony2004 »

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

ขอบคุณครับ
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests