Forgot Password ??

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

	Registered : 109,037

HOME > PHP > PHP Forum > อยากทํา menu drop down โดยมี sub menu ประมาณ 6 ชั้นครับ ใช้jquery

อยากทํา menu drop down โดยมี sub menu ประมาณ 6 ชั้นครับ ใช้jquery

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

kenghockey

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

อยากทํา menu drop down โดยมี sub menu ประมาณ6 ชั้นครับ หรือจะไม่จํากัดก็ได้นะครับ ใช้jquery

Code (PHP)

<html>
	<head>
		<title>Accordian</title>
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<ul id="nav">
		  <li><a href="#">Item 1</a>
		    <ul id="nav">
		      <li><a href="#">Sub-Item 1 b</a>
		      	<ul>
		      		<li>Sub-Item 1 b</li>
		      	</ul>
		      </li>
		      <li><a href="#">Sub-Item 1 b</a></li>
		      <li><a href="#">Sub-Item 1 c</a></li>
		    </ul>
		  </li>
		  <li><a href="#">Item 2</a>
		    <ul>
		      <li><a href="#">Sub-Item 2 a</a></li>
		      <li><a href="#">Sub-Item 2 b</a></li>
		    </ul>
		  </li>
		  <li><a href="#">Item 3</a>
		    <ul>
		      <li><a href="#">Sub-Item 3 a</a></li>
		      <li><a href="#">Sub-Item 3 b</a></li>
		      <li><a href="#">Sub-Item 3 c</a></li>
		      <li><a href="#">Sub-Item 3 d</a></li>
		    </ul>
		  </li>
		  <li><a href="#">Item 4</a>
		    <ul>
		      <li><a href="#">Sub-Item 4 a</a></li>
		      <li><a href="#">Sub-Item 4 b</a></li>
		      <li><a href="#">Sub-Item 4 c</a></li>
		    </ul>
		  </li>
		</ul>
	</body>
</html>

Code (JavaScript)

$(document).ready(function () {
  $('#nav > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    }
    else
    {

    }
  });
});

Tag : Java

Date : 2014-02-17 16:57:32

By : kenghockey

View : 4639

Reply : 3

No. 1

TC Admin

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

ตอนนี้ติดปัญหาตรงไหนครับ

Date : 2014-02-18 09:40:39

By : mr.win

No. 2

Guest

นี่เลยครับ จะเอากี่ขั้นก็ยัดไป
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

Date : 2014-02-18 09:59:39

By : WiTT

No. 3

kenghockey

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

ต้องการใส่ Cookie ให่เวลาเปิดเบราว์เซอร์ขึ้นมา แล้วเมนูที่เปิดค้าง ไม่ปิดยังเปิดค้างเหมือนเดิมอยู่ทํายังไงครับ

Code (JavaScript)

$(document).ready(function () {

  initMenu();

  function initMenu() {
    $(".sub-menu").hide();
    //$(".current_page_item .sub-menu").show();
    $('#menu li a').click(function() {

        var checkElement = $(this).next();

        console.log(checkElement);

        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            checkElement.slideUp('fast');
            return false;
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').not(checkElement.parentsUntil('#menu')).slideUp('fast');
            checkElement.slideDown('fast');
            return false;
        }
    });
    
    //$('.current-menu-item').parentsUntil('#menu').slideDown('fast');
  }
});

Code (PHP)

<div class="nav">
			<ul id="menu" class="menu">
				<li><a href="#">Sub item A</a>
				    <ul class="sub-menu">
				    	<li>Sub Sub item A<li>
				        <li><a href="#">Sub Sub item A</a>
				            <ul class="sub-menu">
				            	<li>Sub Sub item A<li>
				                <li><a href="#">sub sub sub item a</a>
				                	<ul class="sub-menu">
				                		<li>Sub Sub item A<li>
				            			<li><a href="#">sub sub sub sub item a</a>
					            			<ul class="sub-menu">
					            				<li><a href="#">sub sub sub sub item a</a>
					            					<ul class="sub-menu">
						            					<li>sub sub sub sub item b</li>
							            				<li>sub sub sub sub item b</li>
							            				<li>sub sub sub sub item b</li>
							            				<li>sub sub sub sub item b</li>
					            					</ul>
					            				<li>sub sub sub sub item b</li>
					            				<li>sub sub sub sub item b</li>
					            				<li>sub sub sub sub item b</li>
					            				<li>sub sub sub sub item b</li>
					            			</ul>
				            			</li>
				            			<li>sub sub sub sub item b</li>
				                    </ul>
				                </li>
				            	<li>sub sub sub item b</li>
				                <li><a href="#" class="current-menu-item">sub sub sub item c</a></li>
				            </ul>
				        </li>	            
				        <li>sub sub item b</li>
				        <li>sub sub item c</li>
				    </ul>
				</li>
				<li>Sub Sub item A<li>
				<li>Sub Sub item A<li>
				<li><a href="#">Sub item b</a>
				    <ul class="sub-menu">
				    	<li>sub sub item e</li>
				        <li>sub sub item f</li>
				        <li>sub sub item g</li>
					</ul>
				</li>
			</ul>
		</div>

Date : 2014-02-18 11:32:35

By : kenghockey

ค้นหาข้อมูล

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

Re : อยากทํา menu drop down โดยมี sub menu ประมาณ 6 ชั้นครับ ใช้jquery

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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