Top Menu & Side Menu

GCSS สนับสนุนทั้งเมนูหลัก (Top Menu) และเมนูข้าง (Side Menu) ในแบบ Responsive และยังสนับสนุนเมนูที่มีเมนูย่อย (Sub Menu) ถึงสองชั้นด้วย ตามเมนูตัวอย่างในหน้าเว็บนี้

ในเบื้องต้น GCSS สนับสนุนรูปแบบเมนูเฉพาะเมนูระดับบนสุดเท่านั้นนะครับ โดยมีรูปแบบเริ่มต้นตามตัวอย่างนี้ ซึ่งหากมีการใช้งานเมนูย่อยคุณจำเป็นต้องกำหนดรูปแบบเพิ่มเติมครับ

<nav class="topmenu [responsive] [fullwidth|left|center|right]">
	<label class=toggle-menu for=toggle-menu><span></span><span></span><span></span></label>
	<input type=checkbox id=toggle-menu class=toggle-menu>
	<ul>
		<li><a href=index.html><span>Home</span></a></li>
		<li><a class=menu-arrow href=layout.html><span>Layout</span></a>
			<ul>
				<li><a href=onecolumn.html><span>One Column</span></a></li>
				<li><a class=menu-arrow><span>Two Columns</span></a>
					<ul>
						<li><a href=leftsidebar.html><span>Left Sidebar</span></a></li>
						.....
					</ul>
				</li>
				<li><a class=menu-arrow><span>Three Columns</span></a>
					<ul>
						<li><a href=3columns.html><span>แบบที่ 1</span></a></li>
						.....
						<li class=select><a href=menus.html><span>Menus</span></a></li>
						.....
					</ul>
				</li>
				<li><a href=rtl.html><span>Rtl Support</span></a></li>
			</ul>
		</li>
		.....
	</ul>
</nav>

ด้านบนคือโค้ดสำหรับเมนูหลัก ส่วนด้านล่างคือโค้ดสำหรับเมนูข้าง ซึ่งตัวอย่างแบบเต็มๆของทั้งสองอันนี้สามารถ View Source หน้านี้ดูได้ครับ

<nav class="sidemenu [responsive] [left|right]">
	<ul>
		<li><a href=https://demo.gcms.in.th><span>เว็บตัวอย่างที่ใช้ GCSS</span></a></li>
		<li><a class=menu-arrow><span>ผู้สนับสนุน</span></a>
			<ul>
				<li><a href=https://www.goragod.com><span>Goragod.com</span></a></li>
				<li><a href=https://gcms.in.th><span>GCMS Ajax CMS</span></a></li>
			</ul>
		</li>
	</ul>
</nav>

ทั้งเมนูหลักและเมนูข้างมีรูปแบบเหมือนกันทุกประการครับ มีแตกต่างกันแค่ ถ้าเป็นเมนูหลัก เราจะใส่คลาส topmenu ให้ nav แต่ถ้าเป็นเมนูข้างเราจะใส่คลาส sidemenu ให้ nav แทน

.responsive ใช้ระบุร่วมกันใน nav เพื่อกำหนดให้เมนูนี้เป็นแบบ Responsive
.left .center และ .right ใช้ระบุร่วมกันใน nav เพื่อจัดตำแน่งเมนูสำหรับเมนูหลัก และใช้กำหนดตำแหน่งข้อความใน เมนูข้างและเมนูย่อย
.fullwidth ใช้ระบุร่วมกันใน nav เพื่อกำหนดให้เมนูหลักแสดงผลแบบเต็มความกว้างของกรอบ
.menu-arrow ใช้ระบุร่วมกันกับ tag a เพื่อบอกว่าเมนูลำดับนี้มีเมนูย่อย ซึ่งจะทำให้เมนูแสดงลูกศร
สำหรับโค้ดในส่วนของตัวอักษรตัวเอียงสีเขียว เป็นส่วนเพิ่มเติมของเมนูหลักที่ต้องใส่หากกำหนดให้เมนูเป็นแบบ Responsive เนื่องจากมันเป็นส่วนของปุ่มกดสำหรับ Responsive Menu (ไม่ต้องใส่โค้ดส่วนนี้ หากใช้งานร่วมกับ GDDMenu)
จุดเปลี่ยนเมนูสำหรับเมนูหลัก (แสดงบนอุปกรณ์ mobile) คือที่ขนาดหน้าจอ 960 พิกเซล และสำหรับเมนูข้างคือที่ขนาดหน้าจอ 768 พิกเซล

/* เมนูหลัก */
.topmenu {
	display: inline-block;
	vertical-align: middle;
	line-height: 2em;
}
.topmenu > ul ul {
	/* สีพื้นและเงาของ เมนูย่อย */
	box-shadow: 0 0 3px rgba(0,0,0,0.1);
	background-color: #FFF;
}
.topmenu > ul > li > a {
	/* สีตัวอักษรของเมนูหลักระดับบนสุด */
	color: #FFF;
}
@media only screen and (max-width: 960px) {
	/* เมื่อเมนูหลักถูกแสดงบนอุปกรณ์ mobile */
	.topmenu > ul, .topmenu > ul ul {
		/* สีพื้นและสีตัวอักษร เมื่อเมนูถูกแสดงบนอุปกรณ์ mobile */
		background-color: rgba(0,0,0,0.7);
		color: #FFF;
	}
}
/* เมนูข้าง */
.sidemenu {
	/* สีพื้นของเมนูข้าง */
	background-color: #F9F9F9
}
.sidemenu li {
	/* เส้นคั่นเมนูข้าง */
	border-bottom: 1px solid #EEE;
	border-top: 1px solid #FFF;
}
.sidemenu h1 {
	padding: 5px 10px 0;
}
.sidemenu > ul ul {
	/* สีพื้นและเงาของ เมนูย่อย */
	box-shadow: 0 0 3px rgba(0,0,0,0.1);
	background-color: #FFF;
}
@media only screen and (max-width: 768px) {
	/* เมื่อเมนูข้างถูกแสดงบนอุปกรณ์ mobile */
	.sidemenu > ul ul > li:last-child {
		/* ลบเส้นคั่นด้านล่างสำหรับเมนูย่อยรายการล่างสุด */
		border-bottom: none;
	}
}

โค้ดด้านบนเป็นตัวอย่างการกำหนด CSS เบื้องต้นให้กับเมนูตามที่ผมใช้งานในหน้านี้ครับ

สำหรับการแสดงเมนูหลักแบบ .center ควรกำหนดความกว้างของเมนู (ที่คลาส .topmenu) ด้วยเนื่องจากบน IE ตั้งแต่ 8 ลงมาจะไม่แสดงคำสั่งนี้หากไม่มีการกำหนดขนาดของเมนู