• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
منوی آکاردیونی
#1
سلام دوستان من یک منوی آکاردیونی از اینترنت دانلود کردم که هر موقع نشانگر موس روش میره زیر منو هاش باز میشه و وقتی موس را کنار میبری زیر منوها جمع میشن!
حالا من میخام این را طوری تغییر بدم که وقتی کلیک شد روی منو زیر منوها باز بشن و با کلیک بعدی بسته شن نه با رفتن موس روی ان. لطفا راهنمایی کنید کجای کد را باید عوض کنم مرسی؟؟
  پاسخ
تشکر شده توسط :
#2
سلام،
فکر کنم خط ۳۵ رو از hover به click تغییر بدین مشکل حل میشه. Big Grin
غایب
  پاسخ
تشکر شده توسط :
#3
(۱۳۹۴ آذر ۱۶, ۰۱:۰۳ ق.ظ)Alaa نوشته: سلام،
فکر کنم خط ۳۵ رو از hover به click تغییر بدین مشکل حل میشه. Big Grin
Big GrinBig GrinBig GrinBig Grin خط 35 دقیقا؟ Big GrinBig GrinBig GrinBig Grin
بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
  پاسخ
تشکر شده توسط : Alaa
#4
نقل قول:حالا از شوخی گذشته hover را به click تغییر بدم حله یعنی!! این کدی که ميگم همش با css نوشته شده لطفا راهنمایی کنید.
Huh

لطفا سورس منو رو بذارید تا بشه راهنماییتون کرد.
هر چیزی که در جستن آنی آنی...
غایب
  پاسخ
تشکر شده توسط : Alaa
#5
کد پی‌اچ‌پی:
[/php<!doctype html>
<
html>
<
head>
<
meta charset="utf-8">
<
title>Demo For Simple Accordion Menu with CSS3 Transitions</title>
<
style>
@
charset "utf-8";
html {
  
margin0;
  padding
0;
}  
font-size62.5%;
html * {
  -
moz-box-sizingborder-box;  -webkit-box-sizingborder-box;
  -
ms-box-sizingborder-box;  -o-box-sizingborder-box;
}  
box-sizingborder-box;
body {
  
margin0;  positionrelative;
  
min-width190px;  padding0;
  
font-size12px/* rem非対応ブラウザ用 */
  
font-size1.2rem/* rem対応ブラウザの為に上書き指定 */  background-color#fff;
  
font-family"ヒラギノ角ゴ Pro W3"     "Hiragino Kaku Gothic Pro"     "メイリオ"     "Meiryo"     "MS Pゴシック"
  
-webkit-text-size-adjust100%; /* Chromeちゃんが気分次第でフォントサイズおかしくしちゃうので対処 */
  
color#333;  line-height: 1.4;
  
text-aligncenter;
a:link
a
:visited}
  
text-decorationunderline;
  
color#C63;a:hover
a:active {
a:active text-decorationnone; }a:hover}
  
font-size16px;  margin20px auto 10px;h1 {
.
ref margin0 auto 20px; }}  font-size1.6rem
  padding
0;
  
width350px;
}.
menu {
  
margin0 auto;
  
margin-top1px;
  
padding14px 10px;
  
width100%;
  
background#337D88;.menu li { list-style: none; }
.menu li a {
  
displaytable;
  -
webkit-transition-propertybackground;  overflowhidden;
  -
webkit-transition-timing-function: ease-out;  -webkit-transition-duration0.4s;  text-alignleft;  text-decorationnone;
  
color#fff;  vertical-align: middle;
.menu li:first-child a margin-top0; }
.
menu li a:hover {  transition-duration0.4s;  transition-propertybackground;
}  
transition-timing-function: ease-out;
  
transition-timing-function: ease-out;
}  
transition-propertybackground;
  
transition-duration0.2s;  -webkit-transition-duration0.2s;
  -
webkit-transition-timing-function: ease-out;  background#4AADBB;
  
-webkit-transition-propertybackground;
.
menu li li a {
  
displayblock;}  margin0;
  
padding0;.menu li ul {

  -
webkit-transition-timing-function: ease-out;  -webkit-transition-duration0.5s;  -webkit-transition-propertyall;  color#1F3D39;  background: #C6DDD9;  height: 0;  padding: 0 10px;  margin-top: 0;
  
margin-top1px;  displaytable;.menu li:hover li a {}  transition-timing-function: ease-out;  transition-duration0.5s;  transition-propertyall;
}  
transition-timing-function: ease-out;
.
menu li:hover li a:hover {
  -
webkit-transition-propertybackground;  background#A4CAC8;
  
-webkit-transition-timing-function: ease-out;  -webkit-transition-duration0.2s;  width100%;  padding10px;
  -
webkit-transition-propertyall;  height1em;
  -
webkit-transition-timing-function: ease-out;  -webkit-transition-duration0.3s;
  
transition-duration0.3s;  transition-propertyall;
<
body>
<
div id="css-script-menu">
  <
div class="css-script-center">
    <
ul>
      <
li><a href="http://www.cssscript.com/simple-accordion-menu-with-css3-transitions/">Download</a></li>
      <
li><a href="http://www.cssscript.com/">Back To CSS Script</a></li>
    </
ul>
    <
div class="css-script-ads"><script type="text/javascript"><!--  transition-propertybackground;
  
transition-duration0.2s;
  
transition-timing-function: ease-out;
}
</
style>
<
link href="http://www.cssscript.com/wp-includes/css/sticky.css" rel="stylesheet" type="text/css">
</
head>
  </
div>    <div class="css-script-clear"></div></script></div>src="//pagead2.googlesyndication.com/pagead/show_ads.js">
  <
ul class="menu"><nav id="menu_box"><h1 style="margin-top:150px;">Demo For Simple Accordion Menu with CSS3 Transitions</h1></div>google_ad_width 728;google_ad_slot "3025259193";/* CSSScript Demo Page */google_ad_client "ca-pub-2783044520727903";
      <
script type="text/javascript"</script//-->google_ad_height = 90;
        
<li><a href="#">Menu 2.3</a></li>
      </
ul>        <li><a href="#">Menu 2.1</a></li>
        <
li><a href="#">Menu 2.2</a></li>
      <
ul>
        <
li><a href="#">Menu 3.1</a></li>    </li>
    <
li> <a href="#">Menu 3</a>        <li><a href="#">Menu 1.1</a></li>
        <
li><a href="#">Menu 1.2</a></li>    <li> <a href="#">Menu 1</a>
      <
ul>

    <
li> <a href="#">Menu 2</a>
      <
ul>      </ul>
    </
li>
  })(
window    document    'script'    '//www.google-analytics.com/analytics.js'    'ga');
  
ga('send'     'pageview');  ga('create'     'UA-46156385-1'     'cssscript.com');  (function(i    s    o    g    r<script>
  
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a    m)  (i[r].q=i[r].q||[]).push(arguments)}    i[r].l=1*new Date();a=s.createElement(o)    <li> <a href="#">Menu 4</a> </li>    </li>
</
nav>  </ul>        <li><a href="#">Menu 3.3</a></li>        <li><a href="#">Menu 3.2</a></li>
      </
ul>        <li><a href="#">Menu 3.4</a></li>
</
script>
</
body>
</
html
  پاسخ
تشکر شده توسط :
#6
سلام،
این لینک رو ببینین. [لینک]
یه منوی آکاردیون با کلیک هست. آموزش هم داده که چه جوری میشه نوشت. اینجوری هرطور که خواستی میتونی تغییر بدی.
غایب
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان