Site icon บริษัท โค๊ดบี จำกัด

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

codebee
วิธีทำ-active-menu-ด้วย-css-jquery

วิธีทำ-active-menu-ด้วย-css-jquery

<h3>สอน CSS วิธีทำ active เมนู ด้วย CSS และ query<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>สอน CSS วิธีทำ active เมนู ด้วย CSS และ jquery<&sol;strong><br &sol;>&NewLine;องค์ประกอบหนึ่งที่สำคัญมาก ๆ ของเว็บไซต์คือเมนูหลัก เมนูย่อย เพราะทำหน้าที่เป็นเหมือน Navigator นำทางผู้ใช้งานไปยังหน้าอื่น ๆ ของเว็บไซต์ ในการทำเว็บไซต์ การออกแบบหน้าตาของเว็บไซต์ให้สื่อสารกับผู้ใช้งานเป็นสิ่งสำคัญ เช่น ผู้ใช้งานสามารถรู้ได้ว่า ตัวเองกำลังเยี่ยมชมเนื้อหาหรือหน้าอะไรของเว็บไซต์อยู่ เราสามารถบอกกับผู้ใช้งานเว็บไซต์ได้ว่า เขากำลังอยู่ในหน้าไหน ด้วยการทำ active เมนู<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;activemenu&sol;" target&equals;"&lowbar;blank">ตัวอย่างการทำงาน active เมนู<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><br &sol;>&NewLine;โดยทั่วไปของการทำ hover หรือ active เมนูก็จะเป็นการใช้ความสามารถของ CSS เปลี่ยนสีของ background ด้วยคำสั่ง <strong>background-color&colon;&num;ffffff&semi;<&sol;strong> หรือเปลี่ยนสีของฟอนต์ไปพร้อม ๆ กับสีของแบคกราวด์ด้วยคำสั่ง <strong>color&colon;&num;ffffff&semi;<&sol;strong> เป็นต้น ในบทความนี้ลองมาดูกันครับว่า เราจะสามารถทำ hover เมนู และ active เมนูได้อย่างไร<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>สร้างไฟล์ html และเมนูหลักด้วย ul &sol; li<&sol;h4>&NewLine;<p>เริ่มต้นให้เราสร้างไฟล์ &period;html โดยใช้แท็ก ul และ li ทำรายการเมนู ดังตัวอย่างโค๊ดด้านล่าง<&sol;p>&NewLine;<p><strong>index&period;html<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;body&gt&semi; &NewLine;&lt&semi;div&gt&semi; &NewLine; &lt&semi;ul class&equals;"nav"&gt&semi; &NewLine; &lt&semi;li class&equals;"active"&gt&semi;&lt&semi;a href&equals;"&num;"&gt&semi;หน้าแรก&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&num;"&gt&semi;ผลิตภัณฑ์&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&num;"&gt&semi;โปรโมชั่น&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&num;"&gt&semi;เกี่ยวกับเรา&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&num;"&gt&semi;ติดต่อเรา&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;&sol;ul&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi; &NewLine;&lt&semi;&sol;body&gt&semi;<&sol;pre>&NewLine;<p>จากโค๊ด html ด้านบนจะเห็นว่าแท็ก li แรกจะถูกกำหนดค่าเริ่มต้นด้วยคลาส active เพื่อให้ผู้เข้าชมเว็บไซต์หน้าแรกทราบว่าตอนนี้เขากำลังดูข้อมูลของหน้าแรกอยู่ ในขั้นตอนต่อไปให้สร้างไฟล์ style&period;css และเขียนคำสั่งกำหนดหน้าตาของเมนูเมื่อมีการ hover และ active ดังนี้<&sol;p>&NewLine;<p><strong>style&period;css<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&period;nav &gt&semi; li &gt&semi; a &lbrace; &NewLine; &Tab;background-color&colon; &num;f8f8f8 &excl;important&semi; &NewLine;&rcub; &NewLine;&period;nav &gt&semi; li&period;active &gt&semi; a&comma; &NewLine;&period;nav &gt&semi; li&colon;hover &gt&semi; a&comma; &NewLine;&period;nav &gt&semi; li &gt&semi; a&colon;hover &lbrace; &NewLine;&Tab;color&colon;&num;FFFFFF &excl;important&semi; &NewLine;&rcub; &NewLine;&period;nav &gt&semi; li&period;active &gt&semi; a&colon;after&comma; &NewLine;&period;nav &gt&semi; li&colon;hover &gt&semi; a&colon;after&comma; &NewLine;&period;nav &gt&semi; li &gt&semi; a&colon;hover&colon;after &lbrace; &NewLine; &Tab;background-color&colon; &num;5d5d5d &excl;important&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p>ให้ลองทดสอบการทำงานดู จะเห็นว่าเมนูหลักของเราสามารถทำงานได้แล้ว เมื่อมีการ hover ที่เมนูใด ๆ สีของ background ก็จะเปลี่ยนไปตาม color code ที่เรากำหนดไว้ใน style&period;css<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>ตัวอย่างเมื่อมี mouse ไป hover ที่เมนู<&sol;strong><br &sol;>&NewLine;<img width&equals;"100&percnt;" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;css-วิธีทำ-active-เมนู&period;gif" alt&equals;"css-วิธีทำ-active-เมนู" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;หลังจากที่เราได้กำหนดการ hover ของเมนูผ่าน css เรียบร้อยแล้ว ให้สร้างไฟล์ menu&period;js เพื่อเพิ่ม active class เมื่อมีการคลิก และให้สีของ background คงอยู่ในหน้าที่กำหลังดู ในขั้นตอนของการ active จำเป็นต้องเขียนเป็น javascript<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&dollar;&lpar;"&period;nav li"&rpar;&period;each&lpar;function&lpar;index&rpar;&lbrace; &NewLine;&Tab;&dollar;&lpar;this&rpar;&period;click&lpar;function&lpar;&rpar;&lbrace; &NewLine;&Tab;&Tab;var currentActive &equals; &dollar;&lpar;"&period;nav"&rpar;&period;find&lpar;"li&period;active"&rpar;&semi;&Tab; &NewLine;&Tab;&Tab;currentActive&period;removeClass&lpar;"active"&rpar;&semi;&Tab; &NewLine;&Tab;&Tab;&dollar;&lpar;this&rpar;&period;addClass&lpar;"active"&rpar;&semi;&Tab;&Tab; &NewLine;&Tab;&rcub;&rpar;&semi; &NewLine;&rcub;&rpar;&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>เพิ่มความน่าสนใจให้เมนู ด้วยคำสั่ง transition<&sol;h4>&NewLine;<p>เราสามารถเพิ่มความน่าสนให้กับเมนูหลักของเราได้ ด้วยการใส่ transition ลงไปใน css เพื่อให้สี background ค่อย fade ขึ้นมาแบบ smooth ขึ้น โดยการเพิ่มคำสั่งลงไปใน style&period;css ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&period;nav &gt&semi; li &gt&semi; a &lbrace; &NewLine; &Tab;background-color&colon; &num;f8f8f8 &excl;important&semi; &NewLine; &Tab;-webkit-transition&colon; all &period;5s ease&semi; &NewLine; &Tab;-moz-transition&colon; all &period;5s ease&semi; &NewLine; &Tab;-ms-transition&colon; all &period;5s ease&semi; &NewLine; &Tab;-o-transition&colon; all &period;5s ease&semi; &NewLine; &Tab;transition&colon; all &period;5s ease&semi; &NewLine;&rcub; &NewLine;&period;nav &gt&semi; li&period;active &gt&semi; a&comma; &NewLine;&period;nav &gt&semi; li&colon;hover &gt&semi; a&comma; &NewLine;&period;nav &gt&semi; li &gt&semi; a&colon;hover &lbrace; &NewLine;&Tab;color&colon;&num;FFFFFF &excl;important&semi; &NewLine; &Tab;background-color&colon; &num;5d5d5d &excl;important&semi; &NewLine;&Tab;-webkit-transition&colon; all &period;5s ease&semi; &NewLine; &Tab;-moz-transition&colon; all &period;5s ease&semi; &NewLine; &Tab;-ms-transition&colon; all &period;5s ease&semi; &NewLine; &Tab;-o-transition&colon; all &period;5s ease&semi; &NewLine; &Tab;transition&colon; all &period;5s ease&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;activemenu&sol;" target&equals;"&lowbar;blank">ตัวอย่างการทำงาน active เมนู<&sol;a><&sol;p><&sol;blockquote>&NewLine;

Exit mobile version