Category Website Development

สอน CSS วิธีทำ active เมนู ด้วย CSS และ jquery

Author codebee Published on 8 min read
วิธีทำ-active-menu-ด้วย-css-jquery
วิธีทำ-active-menu-ด้วย-css-jquery

สอน CSS วิธีทำ active เมนู ด้วย CSS และ query



สอน CSS วิธีทำ active เมนู ด้วย CSS และ jquery
องค์ประกอบหนึ่งที่สำคัญมาก ๆ ของเว็บไซต์คือเมนูหลัก เมนูย่อย เพราะทำหน้าที่เป็นเหมือน Navigator นำทางผู้ใช้งานไปยังหน้าอื่น ๆ ของเว็บไซต์ ในการทำเว็บไซต์ การออกแบบหน้าตาของเว็บไซต์ให้สื่อสารกับผู้ใช้งานเป็นสิ่งสำคัญ เช่น ผู้ใช้งานสามารถรู้ได้ว่า ตัวเองกำลังเยี่ยมชมเนื้อหาหรือหน้าอะไรของเว็บไซต์อยู่ เราสามารถบอกกับผู้ใช้งานเว็บไซต์ได้ว่า เขากำลังอยู่ในหน้าไหน ด้วยการทำ active เมนู


ตัวอย่างการทำงาน active เมนู



โดยทั่วไปของการทำ hover หรือ active เมนูก็จะเป็นการใช้ความสามารถของ CSS เปลี่ยนสีของ background ด้วยคำสั่ง background-color:#ffffff; หรือเปลี่ยนสีของฟอนต์ไปพร้อม ๆ กับสีของแบคกราวด์ด้วยคำสั่ง color:#ffffff; เป็นต้น ในบทความนี้ลองมาดูกันครับว่า เราจะสามารถทำ hover เมนู และ active เมนูได้อย่างไร

สร้างไฟล์ html และเมนูหลักด้วย ul / li

เริ่มต้นให้เราสร้างไฟล์ .html โดยใช้แท็ก ul และ li ทำรายการเมนู ดังตัวอย่างโค๊ดด้านล่าง

index.html

<body>
<div>
  <ul class="nav">
    <li class="active"><a href="#">หน้าแรก</a></li>
    <li><a href="#">ผลิตภัณฑ์</a></li>
    <li><a href="#">โปรโมชั่น</a></li>
    <li><a href="#">เกี่ยวกับเรา</a></li>
    <li><a href="#">ติดต่อเรา</a></li>
  </ul>
</div>
</body>

จากโค๊ด html ด้านบนจะเห็นว่าแท็ก li แรกจะถูกกำหนดค่าเริ่มต้นด้วยคลาส active เพื่อให้ผู้เข้าชมเว็บไซต์หน้าแรกทราบว่าตอนนี้เขากำลังดูข้อมูลของหน้าแรกอยู่ ในขั้นตอนต่อไปให้สร้างไฟล์ style.css และเขียนคำสั่งกำหนดหน้าตาของเมนูเมื่อมีการ hover และ active ดังนี้

style.css

.nav > li > a {
  	background-color: #f8f8f8 !important;
}
.nav > li.active > a,
.nav > li:hover > a,
.nav > li > a:hover {
	color:#FFFFFF !important;
}
.nav > li.active > a:after,
.nav > li:hover > a:after,
.nav > li > a:hover:after {
  	background-color: #5d5d5d !important;
}

ให้ลองทดสอบการทำงานดู จะเห็นว่าเมนูหลักของเราสามารถทำงานได้แล้ว เมื่อมีการ hover ที่เมนูใด ๆ สีของ background ก็จะเปลี่ยนไปตาม color code ที่เรากำหนดไว้ใน style.css


ตัวอย่างเมื่อมี mouse ไป hover ที่เมนู
css-วิธีทำ-active-เมนู


หลังจากที่เราได้กำหนดการ hover ของเมนูผ่าน css เรียบร้อยแล้ว ให้สร้างไฟล์ menu.js เพื่อเพิ่ม active class เมื่อมีการคลิก และให้สีของ background คงอยู่ในหน้าที่กำหลังดู ในขั้นตอนของการ active จำเป็นต้องเขียนเป็น javascript

$(".nav li").each(function(index){
	$(this).click(function(){
		var currentActive = $(".nav").find("li.active");	
		currentActive.removeClass("active");	
		$(this).addClass("active");		   
	});
});


เพิ่มความน่าสนใจให้เมนู ด้วยคำสั่ง transition

เราสามารถเพิ่มความน่าสนให้กับเมนูหลักของเราได้ ด้วยการใส่ transition ลงไปใน css เพื่อให้สี background ค่อย fade ขึ้นมาแบบ smooth ขึ้น โดยการเพิ่มคำสั่งลงไปใน style.css ดังนี้

.nav > li > a {
  	background-color: #f8f8f8 !important;
  	-webkit-transition: all .5s ease;
  	-moz-transition: all .5s ease;
  	-ms-transition: all .5s ease;
  	-o-transition: all .5s ease;
  	transition: all .5s ease;
}
.nav > li.active > a,
.nav > li:hover > a,
.nav > li > a:hover {
	color:#FFFFFF !important;
  	background-color: #5d5d5d !important;
	-webkit-transition: all .5s ease;
  	-moz-transition: all .5s ease;
  	-ms-transition: all .5s ease;
  	-o-transition: all .5s ease;
  	transition: all .5s ease;
}


ตัวอย่างการทำงาน active เมนู

You may also like