Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > วันนี้มาแจกโค๊ด Drop Down Menu โดย Code มีแต่ HTML + Css3 แบบง่ายๆ มาฝาก

วันนี้มาแจกโค๊ด Drop Down Menu โดย Code มีแต่ HTML + Css3 แบบง่ายๆ มาฝาก

เริ่มหัวข้อใหม่

Man_kill_love

โพสกระทู้ ( 174 )
บทความ ( 0 )

อันนี้เป็น Dorp down ที่ผมเขียนขึ้นมาใช้งานเอง เป็น HTML + CSS3 ยังบัคเรื่อง IE8 ลงไป กับ Opera ถ้ายังไงก็ช่วยขัดเกาให้หน่อยก็ดีนะครับ สำหรับคนที่เอาไปใช้ก็ดัดแปลงเอาตามใจชอบเลยครับ

ส่วนคนที่ต้องการจะทำ Link ไปหน้าอื่น มี 2 วิธีนะครับ
1) ใช้ JavaScript , AJAX , Jquery แล้วแต่ความถนัด ถ้าเป็น JavaScript ก็ให้เป็น Event Onclick(); นะครับ
2) ใช้ Tag <a>…</a> ของ HTML ใส่ลงไปก็สามารถใช้งานได้นะครับ

วิธีการนำไปใช้งานมี 2 วิธีนะครับ
1) Copy ที่ผมทำไว้เอาไปรวมกันเป็น 1 หน้า ส่วนที่เป็น Css ให้ครอบด้วย Tag <style>…</style>
2) Save แบบแยกไฟล์ เป็น 2 ไฟล์ ไฟล์ที่ 1 ในส่วนของ HTML ให้เซฟเป็น .HTML ในส่วนที่ 2 ให้เซฟเป็น .Css แล้วทำการ include โดยใช้สำสั้ง Tag <link>…</link> ของ HTML มาใช้ในหน้านั้นครับ

ส่วนที่ 1 เป็น HTML

<meta charset="UTF-8"/>
<!-- Menu 1 -->
<ul class="nav-menu-top">
      <li>
      <a href="#">เมนู 1</a>
      
           <ul>
              <li class="Menu">
	              <a href="#">
	              	<img src="image.png" width="16" height="16" border="0" align="absmiddle">&nbsp;เมนู 1.1
	              </a>
              </li>
              
              <li class="Menu">
              	<a href="#">
              		<img src="image.png" width="16" height="16" border="0" align="absmiddle">&nbsp;เมนู 1.2
              	</a>
              </li>
              
              <li class="Menu">
              	<a href="#">
              	  <img src="image.png" width="16" height="16" border="0" align="absmiddle">&nbsp;เมนู 1.3
                </a>
              </li>
              
			<li class="Menu">
				<img src="image.png" width="16" height="16" border="0" align="absmiddle">&nbsp;เมนู 1.4
			</li>
            
              <li>
	              <a href="#">
	              	<img src="image.png" width="16" height="16" border="0" align="absmiddle">&nbsp;เมนู 1.4
	              	<img src="next.png" width="30" height="30" border="0" align="right"/>
	              </a>
	              	<ul>
	              		<li class="Mu">เมนู 1.4.1</li>
	              		<li class="Mu">เมนู 1.4.2</li>
	              		<li class="Mu">เมนู 1.4.3</li>
	              	</ul>
              </li>
              
              <li>
              <a href="#">
              	<img src="image.png" width="16" height="16" border="0" align="absmiddle">&nbsp;เมนู 1.5&nbsp;
              	<img src="next.png" width="30" height="30" border="0" align="right"/>
              </a>
              
                <ul>
                
                  <li class="Menu">
                  	<a href="#">เมนู 1.5.1</a>
                  </li>
                  
                  <li class="Menu" id="nav-menu-left">
                  	<a href="#">
                  		เมนู 1.5.2
	                  	<img src="next.png" width="30" height="30" border="0" align="right"/>
                  	</a>
                  	<ul>
              		<li class="mi">เมนู 1.5.2.1</li>
              		<li class="mu">เมนู 1.5.2.2</li>
              		</ul>
                  </li>
                  
                </ul>
                
            </ul>
          </li>
        </ul>
	</ul>
	
<!-- Menu 2 -->
 <ul class="nav-menu-top">
			<li id="report"><a href="#">2</a>
			<ul>
              <li><a href="#">เมนู 2.1</a></li>
              <li><a href="#">เมนู 2.2</a></li>
			</ul>
	</ul>
 <!-- Menu 3 -->    
    <ul class="nav-menu-top">
			<li><a href="#">เมนู 3</a>
			<ul>
              <li><a href="#">เมนู 3.1</a></li>
              <li><a href="#">เมนู 3.2</a></li>
			</ul>
	</ul>
<!-- Menu 4 -->
	<ul class="nav-menu-top">
			<li><a href="#">เมนู 4</a>
			<ul>
              <li class="mu"><a href="#"><img src="image.png" width="16" height="16" border="0" align="absmiddle"/>&nbsp;เมนู 4.1</a></li>
              
              <li class="mu"><a href="#"><img src="image.png" width="16" height="16" border="0" align="absmiddle"/>&nbsp;เมนู 4.2</a></li>
              
              <li class="mu"><a href="#"><img src="imae.png" width="16" height="16" border="0" align="absmiddle"/>&nbsp;เมนู 4.3</a></li>
			</ul>
	</ul>

ส่วนที่ 2 เป็น Css

/* CSS Document */
nav .nav-menu-top
{
	margin : 5px;
	padding : 0px;
	display : inline-block;
	width : 100px;
	height : 25px;
	vertical-align : top;
	text-align : center;
	text-decoration : none;
	position : relative;
	font:Verdana, Geneva, sans-serif 14px;
}
nav ul
{
	margin : 0;
	padding : 0;
	font:Verdana, Geneva, sans-serif 14px;
}
nav ul li:hover
{
	color : #000000;
	text-decoration : none;
	background:#999999;
}

nav ul li a
{
	color : #000000;
	text-decoration : none;
}

nav ul li ul
{
	line-height : 2em;
	background : #CCCCCC;
	width : 250px;
	position : relative;
	text-align : left;
	visibility : hidden;
	top : 2px;
	z-index : 1;
}
nav ul li:hover ul
{
	background : #CCCCCC;
	width : 250px;
	position : relative;
	text-align : left;
	visibility : visible;
	z-index : 2;
}
nav ul li ul li
{
	padding-left:10px;
	background : #CCCCCC;
	width : 250px;
	position : relative;
	text-align : left;
	border : 1px #999999 solid;
}

nav ul li ul li:hover
{
	background : #999999;
	width : 250px;
	position : relative;
	text-align : left;
	border : 1px #999999 solid;
}

#wapper nav .nav-menu-top li ul li ul {
	display : block;
	clear : both;
	position : absolute;
	visibility : hidden;
	top : 0px;
	left : 16.3em;
}
#wapper nav .nav-menu-top li ul li:hover ul {
	display : block;
	clear : both;
	position : absolute;
	visibility : visible;
	top : 0px;
	left : 16.3em;
}

#wapper nav .nav-menu-top li ul li:hover ul ul {
	display : block;
	clear : both;
	position : absolute;
	visibility : hidden;
	top : 0px;
	left : 16.3em;
}

#wapper nav .nav-menu-top li ul li:hover ul #nav-menu-left:hover ul {
	display : block;
	clear : both;
	position : absolute;
	visibility : visible;
	top : 0px;
	left : 16.3em;
}

ปล. อยากเขียนบทความใจจะขาด แต่ทำไม่เป็น

Tag : PHP, HTML/CSS, JavaScript, Ajax, jQuery

ประวัติการแก้ไข
2012-07-25 08:12:13

Date : 2012-07-25 01:19:09

By : thethaicom

View : 21016

Reply : 4

No. 1

SUPERNOY

โพสกระทู้ ( 161 )
บทความ ( 0 )

เอาไปใช้ไงได้อะ

Date : 2012-07-25 03:04:43

By : comscience_009

No. 2

Man_kill_love

โพสกระทู้ ( 174 )
บทความ ( 0 )

วิธีการนำไปใช้งานมี 2 วิธีนะครับ
1) Copy ที่ผมทำไว้เอาไปรวมกันเป็น 1 หน้า ส่วนที่เป็น Css ให้ครอบด้วย Tag <style>…</style>
2) Save แบบแยกไฟล์ เป็น 2 ไฟล์ ไฟล์ที่ 1 ในส่วนของ HTML ให้เซฟเป็น .HTML ในส่วนที่ 2 ให้เซฟเป็น .Css แล้วทำการ include โดยใช้สำสั้ง Tag <link>…</link> ของ HTML มาใช้ในหน้านั้นครับ

Date : 2012-07-25 08:11:27

By : thethaicom

No. 3

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

+1 ให้แล้วครับ

Date : 2012-07-26 06:29:48

By : mr.win

No. 4

Man_kill_love

โพสกระทู้ ( 174 )
บทความ ( 0 )

ขอบคุณครับ

Date : 2012-07-26 12:50:55

By : thethaicom

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : วันนี้มาแจกโค๊ด Drop Down Menu โดย Code มีแต่ HTML + Css3 แบบง่ายๆ มาฝาก

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก