Q - วิธีเปลี่ยนสีแถบเมนู

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Q - วิธีเปลี่ยนสีแถบเมนู

โพสต์ที่ยังไม่ได้อ่าน โดย Parichat »

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarText">
		<ul class="navbar-nav mr-auto">
                 	<li class="nav-item active">
                       		<a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image16', '', 'picture/menu/menu-home2.gif', 1)">
				<img src="picture/menu/menu-home1.gif" name="Image16" width="116" height="35" border="0"></a>
			</li>
			<li class="nav-item">
				<a href="about us.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17', '', 'picture/menu/menu-about2.gif', 1)">
				<img src="picture/menu/menu-about1.gif" name="Image17" width="112" height="35" border="0"></a>
	 		</li>
                                                                <li class="nav-item">
                                                                        <a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18', '', 'picture/menu/menu-products2.gif', 1)">
                                                                                <img src="picture/menu/menu-products1.gif" name="Image18" width="111" height="35" border="0"></a>
                                                                </li>
                                                                <li class="nav-item">
                                                                        <a href="gallery/demo.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19', '', 'picture/menu/menu-gallery2.gif', 1)">
                                                                                <img src="picture/menu/menu-gallery1.gif" name="Image19" width="111" height="35" border="0"></a>
                                                                </li>
                                                                <li class="nav-item">
                                                                        <a href="download.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20', '', 'picture/menu/menu-download2.gif', 1)">
                                                                                <img src="picture/menu/menu-download1.gif" name="Image20" width="111" height="35" border="0"></a>
                                                                </li>
                                                                <li class="nav-item">
                                                                        <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21', '', 'picture/menu/menu-contact2.gif', 1)">
                                                                                <img src="picture/menu/menu-contact1.gif" name="Image21" width="112" height="35" border="0"></a>
                                                                <li class="nav-item">
                                                                        <a href="how_to_buy.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22', '', 'picture/menu/how-to-buy-2.gif', 1)">
                                                                                <img src="picture/menu/how-to-buy-1.gif" name="Image22" width="112" height="35" border="0"></a>
                                                                </li>
                                                                <li class="nav-item">
                                                                        <a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31', '', 'picture/menu/menu-news2.gif', 1)">
                                                                                <img src="picture/menu/menu-news1.gif" name="Image31" width="112" height="35" border="0"></a> 
                                                                </li>
                                                        </ul>
                                                </div>
                                        </nav>
ผลลัพธ์ที่ทำได้ตอนนี้
sd.png
ต้องการให้เปลี่ยนเป็นสีดำให้กลืนไปกับพื้นหลัง
Live Simply, Laugh Often, Love Deeply.....
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22000
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - วิธีเปลี่ยนสีแถบเมนู

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

หมายถึงสีอักษรหรอครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Re: Q - วิธีเปลี่ยนสีแถบเมนู

โพสต์ที่ยังไม่ได้อ่าน โดย Parichat »

tsukasaz เขียน:หมายถึงสีอักษรหรอครับ
สีของแถบเมนูอะค่ะ
Live Simply, Laugh Often, Love Deeply.....
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22000
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - วิธีเปลี่ยนสีแถบเมนู

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
ลองตรวจสอบชื่อ Class จากตัวอย่างในเว็บ Bootstrap

https://getbootstrap.com/docs/4.1/compo ... or-schemes
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Re: Q - วิธีเปลี่ยนสีแถบเมนู

โพสต์ที่ยังไม่ได้อ่าน โดย Parichat »

tsukasaz เขียน:

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
ลองตรวจสอบชื่อ Class จากตัวอย่างในเว็บ Bootstrap

https://getbootstrap.com/docs/4.1/compo ... or-schemes
ลองเปลี่ยนเป็น

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

<nav class="navbar navbar-expand-lg navbar-light bg-dark">
ผลลัพธ์ที่ได้คือมันไม่เป็นสีดำแต่จะเป็นสีเทาเข้มอะค่ะ
รูปผลลัพธ์
ac.png
Live Simply, Laugh Often, Love Deeply.....
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22000
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - วิธีเปลี่ยนสีแถบเมนู

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ใช้คำสั่ง css กำหนด background-color เป็นสีดำครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Re: Q - วิธีเปลี่ยนสีแถบเมนู

โพสต์ที่ยังไม่ได้อ่าน โดย Parichat »

tsukasaz เขียน:ใช้คำสั่ง css กำหนด background-color เป็นสีดำครับ
ทำได้แล้วค่ะแต่ตอนที่ทำหน้าจอให้เล็กลงเมนูเบอร์เกอร์ 3 ขีดมันเป็นสีดำไปหมดเลยค่ะ ดังรูป
asd.png
asd.png (3.8 KiB) Viewed 2849 times
โค้ดcss ที่เพิ่ม

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

nav.navbackground{
	background-color: #000000;
}
โค้ดที่เรียกใช้ใน HTML

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

<nav class="navbar navbar-expand-lg navbackground">
Live Simply, Laugh Often, Love Deeply.....
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22000
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - วิธีเปลี่ยนสีแถบเมนู

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ลองลบ navbackground ออก
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

Re: Q - วิธีเปลี่ยนสีแถบเมนู

โพสต์ที่ยังไม่ได้อ่าน โดย Parichat »

tsukasaz เขียน:ลองลบ navbackground ออก
ลองลบออกแล้วค่ะเป็นเหมือนเดิมค่ะ
asdf.png
asdf.png (25.91 KiB) Viewed 1945 times
Live Simply, Laugh Often, Love Deeply.....
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22000
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - วิธีเปลี่ยนสีแถบเมนู

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ใส่ color ให้ขีดๆ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ตอบกลับโพส

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 81