Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

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



 

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

 



Topic : 081501



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



สถานะออฟไลน์
Facebook



อันนี้เป็น 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
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-07-25 01:19:09 By : thethaicom View : 20753 Reply : 4
 

 

No. 1



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Facebook

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






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-25 03:04:43 By : comscience_009
 


 

No. 2



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



สถานะออฟไลน์
Facebook

วิธีการนำไปใช้งานมี 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



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

+1 ให้แล้วครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-26 06:29:48 By : mr.win
 


 

No. 4



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



สถานะออฟไลน์
Facebook

ขอบคุณครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-26 12:50:55 By : thethaicom
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : วันนี้มาแจกโค๊ด Drop Down Menu โดย Code มีแต่ HTML + Css3 แบบง่ายๆ มาฝาก
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่