PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

[jQuery] ทำ menu onclick ให้เปิด dialog effect drop ยังไงคับ มีโค้ดเก่า ช่วยหน่อยคับ

[jQuery] ทำ menu onclick ให้เปิด dialog effect drop ยังไงคับ มีโค้ดเก่า ช่วยหน่อยคับ
คือผมไม่ค่อยสันทัดเรื่อง jQuery เลยอยากให้แอดมินหรือผู้รู้ช่วยหน่อยคับ พอดีได้โค้ดมาจากในเน็ตแหละคับ แต่เวลาคลิกตรงเมนู อยากจะให้มันเปิด dialog เป็นแบบ สไลด์ fadein ออกมาจากเมนูที่คลิก และ slide fadeout กลับเข้าไปตอนคลิกที่เมนู item อื่น น่ะคับ

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 170px;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 15px 20px;
  border-left: 1px solid #1682ba;
  border-right: 1px solid #1682ba;
  border-top: 1px solid #1682ba;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: #36aae7;
  background: -webkit-linear-gradient(#36aae7, #1fa0e4);
  background: -moz-linear-gradient(#36aae7, #1fa0e4);
  background: -o-linear-gradient(#36aae7, #1fa0e4);
  background: -ms-linear-gradient(#36aae7, #1fa0e4);
  background: linear-gradient(#36aae7, #1fa0e4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  color: #eeeeee;
  background: #1fa0e4;
  background: -webkit-linear-gradient(#1fa0e4, #1992d1);
  background: -moz-linear-gradient(#1fa0e4, #1992d1);
  background: -o-linear-gradient(#1fa0e4, #1992d1);
  background: -ms-linear-gradient(#1fa0e4, #1992d1);
  background: linear-gradient(#1fa0e4, #1992d1);
}
#cssmenu > ul > li.open > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom: 1px solid #1682ba;
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #eeeeee;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #32373e;
  border-left: 1px solid #32373e;
  border-right: 1px solid #32373e;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #eeeeee;
  background: #49505a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #324852;
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}

<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="style.css">
   <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>Products</title>
</head>
<body>
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Downloads</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>MTX</span></a>
            <ul>
               <li><a href='#'><span>Windows version</span></a></li>
               <li class='last'><a href='#'><span>Android version</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Add-ons</span></a>
            <ul>
               <li><a href='#'><span>Autovote</span></a></li>
               <li class='last'><a href='#'><span>Google Search</span></a></li>
            </ul>
         </li>
			<li class='has-sub'><a href='#'><span>Other..</span></a>
            <ul>
               <li><a href='#'><span>mIRC</span></a></li>
               <li class='last'><a href='#'><span>Chome</span></a></li>
					<li class='last'><a href='#'><span>Firefox</span></a></li>
					<li class='last'><a href='#'><span>Opera</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
<html>

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp();
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown();
			element.siblings('li').children('ul').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp();
		}
	});

	$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

	(function getColor() {
		var r, g, b;
		var textColor = $('#cssmenu').css('color');
		textColor = textColor.slice(4);
		r = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		g = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		b = textColor.slice(0, textColor.indexOf(')'));
		var l = rgbToHsl(r, g, b);
		if (l > 0.7) {
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
		}
		else
		{
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
		}
	})();

	function rgbToHsl(r, g, b) {
	    r /= 255, g /= 255, b /= 255;
	    var max = Math.max(r, g, b), min = Math.min(r, g, b);
	    var h, s, l = (max + min) / 2;

	    if(max == min){
	        h = s = 0;
	    }
	    else {
	        var d = max - min;
	        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	        switch(max){
	            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	            case g: h = (b - r) / d + 2; break;
	            case b: h = (r - g) / d + 4; break;
	        }
	        h /= 6;
	    }
	    return l;
	}
	$('li.active>a').trigger('click');
});
} )( jQuery );


โดย:  Dlsocool IP: 49.230.179.xxx วันที่: 28-09-2014 เวลา: 19:34:13

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 5
ขอบคุณมากคับสำหรับแนวทางและ script เพิ่มเติม ผมเอามาปรับ ดัดแปลงเล็กน้อย เพื่อให้ได้ตามที่ผมต้องการ
ได้โค้ดตามนี้เลยคับ ใช้ onclick="showDataDiv('gs');" ใส่เข้าไปเพื่อให้เปิด div ที่ซ่อน



โดย:  Dlsocool IP: 49.230.76.xxx วันที่: 30-09-2014 เวลา: 13:48:22
 ความคิดเห็นที่ 4
ลองเอาโค้ดนี้ไปดูเป็นแนวทาง ตัวอย่าอาจไม่ตรงเสียทีเดียว คงต้องไปประยุกต์ดัดแปลงเพิ่มเติม

ตัวอย่าง การทำงาน ดูได้ที่ความเห็นแรก

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Din</title>
    <style type="text/css">
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
      line-height: 1;
      display: block;
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    #cssmenu {
      width: 170px;
      font-family: Helvetica, Arial, sans-serif;
      color: #ffffff;
    }
    #cssmenu ul ul {
      display: none;
    }
    .align-right {
      float: right;
    }
    #cssmenu > ul > li > a {
      padding: 15px 20px;
      border-left: 1px solid #1682ba;
      border-right: 1px solid #1682ba;
      border-top: 1px solid #1682ba;
      cursor: pointer;
      z-index: 2;
      font-size: 14px;
      font-weight: bold;
      text-decoration: none;
      color: #ffffff;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
      background: #36aae7;
      background: -webkit-linear-gradient(#36aae7, #1fa0e4);
      background: -moz-linear-gradient(#36aae7, #1fa0e4);
      background: -o-linear-gradient(#36aae7, #1fa0e4);
      background: -ms-linear-gradient(#36aae7, #1fa0e4);
      background: linear-gradient(#36aae7, #1fa0e4);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    #cssmenu > ul > li > a:hover,
    #cssmenu > ul > li.active > a,
    #cssmenu > ul > li.open > a {
      color: #eeeeee;
      background: #1fa0e4;
      background: -webkit-linear-gradient(#1fa0e4, #1992d1);
      background: -moz-linear-gradient(#1fa0e4, #1992d1);
      background: -o-linear-gradient(#1fa0e4, #1992d1);
      background: -ms-linear-gradient(#1fa0e4, #1992d1);
      background: linear-gradient(#1fa0e4, #1992d1);
    }
    #cssmenu > ul > li.open > a {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
      border-bottom: 1px solid #1682ba;
    }
    #cssmenu > ul > li:last-child > a,
    #cssmenu > ul > li.last > a {
      border-bottom: 1px solid #1682ba;
    }
    .holder {
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      right: 0;
    }
    .holder::after,
    .holder::before {
      display: block;
      position: absolute;
      content: "";
      width: 6px;
      height: 6px;
      right: 20px;
      z-index: 10;
      -webkit-transform: rotate(-135deg);
      -moz-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
      -o-transform: rotate(-135deg);
      transform: rotate(-135deg);
    }
    .holder::after {
      top: 17px;
      border-top: 2px solid #ffffff;
      border-left: 2px solid #ffffff;
    }
    #cssmenu > ul > li > a:hover > span::after,
    #cssmenu > ul > li.active > a > span::after,
    #cssmenu > ul > li.open > a > span::after {
      border-color: #eeeeee;
    }
    .holder::before {
      top: 18px;
      border-top: 2px solid;
      border-left: 2px solid;
      border-top-color: inherit;
      border-left-color: inherit;
    }
    #cssmenu ul ul li a {
      cursor: pointer;
      border-bottom: 1px solid #32373e;
      border-left: 1px solid #32373e;
      border-right: 1px solid #32373e;
      padding: 10px 20px;
      z-index: 1;
      text-decoration: none;
      font-size: 13px;
      color: #eeeeee;
      background: #49505a;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    #cssmenu ul ul li:hover > a,
    #cssmenu ul ul li.open > a,
    #cssmenu ul ul li.active > a {
      background: #324852;
      color: #ffffff;
    }
    #cssmenu ul ul li:first-child > a {
      box-shadow: none;
    }
    #cssmenu ul ul ul li:first-child > a {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    #cssmenu ul ul ul li a {
      padding-left: 30px;
    }
    #cssmenu > ul > li > ul > li:last-child > a,
    #cssmenu > ul > li > ul > li.last > a {
      border-bottom: 0;
    }
    #cssmenu > ul > li > ul > li.open:last-child > a,
    #cssmenu > ul > li > ul > li.last.open > a {
      border-bottom: 1px solid #32373e;
    }
    #cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
      border-bottom: 0;
    }
    #cssmenu ul ul li.has-sub > a::after {
      display: block;
      position: absolute;
      content: "";
      width: 5px;
      height: 5px;
      right: 20px;
      z-index: 10;
      top: 11.5px;
      border-top: 2px solid #eeeeee;
      border-left: 2px solid #eeeeee;
      -webkit-transform: rotate(-135deg);
      -moz-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
      -o-transform: rotate(-135deg);
      transform: rotate(-135deg);
    }
    #cssmenu ul ul li.active > a::after,
    #cssmenu ul ul li.open > a::after,
    #cssmenu ul ul li > a:hover::after {
      border-color: #ffffff;
    }   
        
    #contain_cssmenu{
/*        background-color: #CCC;*/
        position: relative;
        width: 670px;
        height: 450px;        
    }
    .cssmenu_more{
        position: absolute;
        float: left;
        left: 0px;
        top: 0px;        
    }
    .show_content{
        position: absolute;
        left: 170px;
        top: 0px;
        background: #324852;
        color: #ffffff;
        height: 400px;
        width: 0px; 
        opacity:0;
    }
    .hidden_content{
         display:none;   
    }
    </style>
</head>
<body>
<div id="contain_cssmenu">
<div id='cssmenu' class="cssmenu_more">
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Downloads</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>MTX</span></a>
            <ul>
               <li><a href='javascript:showDataDiv("data1");'><span>Windows version</span></a></li>
               <li class='last'><a href='javascript:showDataDiv("data2");'><span>Android version</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Add-ons</span></a>
            <ul>
               <li><a href='javascript:showDataDiv("data3");'<span>Autovote</span></a></li>
               <li class='last'><a href='javascript:showDataDiv("data4");'><span>Google Search</span></a></li>
            </ul>
         </li>
			<li class='has-sub'><a href='#'><span>Other..</span></a>
            <ul>
               <li><a href='#'><span>mIRC</span></a></li>
               <li class='last'><a href='#'><span>Chome</span></a></li>
					<li class='last'><a href='#'><span>Firefox</span></a></li>
					<li class='last'><a href='#'><span>Opera</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div class="show_content"></div>
<div class="hidden_content" id="data1">
 <div style="margin:5px;"> Windows version </div>
</div>
<div class="hidden_content" id="data2">
 <div style="margin:5px;"> Android version </div>
</div>
<div class="hidden_content" id="data3">
 <div style="margin:5px;"> Autovote </div> 
</div>
<div class="hidden_content" id="data4">
 <div style="margin:5px;">  Google Search  </div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript">
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp();
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown();
			element.siblings('li').children('ul').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp();
		}
	});
	$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
	(function getColor() {
		var r, g, b;
		var textColor = $('#cssmenu').css('color');
		textColor = textColor.slice(4);
		r = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		g = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		b = textColor.slice(0, textColor.indexOf(')'));
		var l = rgbToHsl(r, g, b);
		if (l > 0.7) {
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
		}
		else
		{
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
		}
	})();
	function rgbToHsl(r, g, b) {
	    r /= 255, g /= 255, b /= 255;
	    var max = Math.max(r, g, b), min = Math.min(r, g, b);
	    var h, s, l = (max + min) / 2;
	    if(max == min){
	        h = s = 0;
	    }
	    else {
	        var d = max - min;
	        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	        switch(max){
	            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	            case g: h = (b - r) / d + 2; break;
	            case b: h = (r - g) / d + 4; break;
	        }
	        h /= 6;
	    }
	    return l;
	}
	$('li.active>a').trigger('click');
});
} )( jQuery );   
function showDataDiv(dataID){
    var obj="#"+dataID;
    $(".show_content")
    .animate({
        width:0,
        opacity:0
    },{
    duration: 500,
    complete: function() {
      $(".show_content").html($(obj).html())
    }
    })
    .animate({
        width:500,
        opacity:1
    }, 500 );
}
function hideDataDiv(){
    $(".show_content")
    .animate({
        width:0,
        opacity:0
    },500);    
}
</script>
</body>
</html>


โดย:  Ninenik IP: 1.46.81.xxx วันที่: 30-09-2014
 ความคิดเห็นที่ 3
ขอบคุณสำหรับคำตอบครับ 
แต่ที่ผมต้องการคือ เวลาคลิกที่เมนูใดๆที่กำหนดไว้ ให้มันเปิด div ที่ซ่อนไว้ โดยการสไลด์ออกมาตามรูบ โดยใส่ effect แบบ fadein ออกมาตอนสไลด์ออกมา และ
และ fadeout ตอนสไลด์กลับเข้าไป ประมานนี้ พอจะมีวิธีไหมครับ ช่วยเหน่อยครับ





โดย:  Dlsocool IP: 49.230.143.xxx วันที่: 29-09-2014 เวลา: 14:11:05
 ความคิดเห็นที่ 2
 งง

โดย:  Dlsocool IP: 49.230.143.xxx วันที่: 29-09-2014 เวลา: 14:10:00
 ความคิดเห็นที่ 1
fadeIn fadeOut ไม่น่าจะเหมาะ กับ เมนูแบบนี้ เพราะขนะ fade จะแสดงพื้นหลังสีขาว
แบบเดิมน่าจะดีแล้ว

หรือถ้าจะเปลี่ยน ลองใช้ script แบบนี้ดู เปลี่ยนไม่เยอะ

    $.fn.slideFadeToggle  = function(speed, easing, callback) {
        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
    ( function( $ ) {  
$( document ).ready(function() {  
$('#cssmenu li.has-sub>a').on('click', function(){  
        $(this).removeAttr('href');  
        var element = $(this).parent('li');  
        if (element.hasClass('open')) {  
            element.removeClass('open');  
            element.find('li').removeClass('open');  
            element.find('ul').slideUp();  
        }  
        else {  
            element.addClass('open');  
            element.children('ul').slideFadeToggle();  
            element.siblings('li').children('ul').slideUp();  
            element.siblings('li').removeClass('open');  
            element.siblings('li').find('li').removeClass('open');  
            element.siblings('li').find('ul').slideUp();  
        }  
    });  
................
........





โดย:  Ninenik IP: 1.47.144.xxx วันที่: 29-09-2014