/
  • منوی آکاردیونی

  • ارسال پاسخ   امتیاز موضوع:
    • 0 رأی - میانگین امیتازات: 0
    • 1
    • 2
    • 3
    • 4
    • 5

    حالت موضوعی | حالت خطی منوی آکاردیونی
    نویسنده پیام
    mohammad.mm540 آفلاین
    عضو
    ***

    ارسال‌ها: 217
    تاریخ عضویت: ۱۳۹۴ تير ۳۱
    اعتبار: 0
    تشکرها : 18
    ( 5 تشکر در 5 ارسال )
    ارسال: #1
    منوی آکاردیونی
    سلام دوستان من یک منوی آکاردیونی از اینترنت دانلود کردم که هر موقع نشانگر موس روش میره زیر منو هاش باز میشه و وقتی موس را کنار میبری زیر منوها جمع میشن!
    حالا من میخام این را طوری تغییر بدم که وقتی کلیک شد روی منو زیر منوها باز بشن و با کلیک بعدی بسته شن نه با رفتن موس روی ان. لطفا راهنمایی کنید کجای کد را باید عوض کنم مرسی؟؟
    ۱۳۹۴ آذر ۱۵ ۱۱:۱۳ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    Alaa غایب
    علا عالم فلکی
    ***

    ارسال‌ها: 944
    تاریخ عضویت: ۱۳۹۲ فروردين ۲۰
    اعتبار: 52
    تشکرها : 744
    ( 663 تشکر در 478 ارسال )
    ارسال: #2
    RE: منوی آکاردیونی
    سلام،
    فکر کنم خط ۳۵ رو از hover به click تغییر بدین مشکل حل میشه. Big Grin
    __________________________________________________________________________
    ۱۳۹۴ آذر ۱۶ ۱۲:۰۳ صبح
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط :
    webnevesht آفلاین
    محمدرضا سلطانی
    ***

    ارسال‌ها: 972
    تاریخ عضویت: ۱۳۹۰ آذر ۲۵
    اعتبار: 22
    تشکرها : 384
    ( 702 تشکر در 427 ارسال )
    ارسال: #3
    RE: منوی آکاردیونی
    (۱۳۹۴ آذر ۱۶ ۱۲:۰۳ صبح)Alaa نوشته شده توسط:  سلام،
    فکر کنم خط ۳۵ رو از hover به click تغییر بدین مشکل حل میشه. Big Grin
    Big GrinBig GrinBig GrinBig Grin خط 35 دقیقا؟ Big GrinBig GrinBig GrinBig Grin
    __________________________________________________________________________
    بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
    ۱۳۹۴ آذر ۱۶ ۱۲:۰۷ صبح
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : Alaa
    undefined غایب
    احسان
    *******

    ارسال‌ها: 2,087
    تاریخ عضویت: ۱۳۸۸ مهر ۲۹
    اعتبار: 76
    تشکرها : 2005
    ( 2071 تشکر در 1219 ارسال )
    ارسال: #4
    RE: منوی آکاردیونی
    نقل قول: حالا از شوخی گذشته hover را به click تغییر بدم حله یعنی!! این کدی که ميگم همش با css نوشته شده لطفا راهنمایی کنید.
    Huh

    لطفا سورس منو رو بذارید تا بشه راهنماییتون کرد.
    __________________________________________________________________________
    هر چیزی که در جستن آنی آنی...
    ۱۳۹۴ آذر ۱۶ ۱۲:۲۳ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : Alaa
    mohammad.mm540 آفلاین
    عضو
    ***

    ارسال‌ها: 217
    تاریخ عضویت: ۱۳۹۴ تير ۳۱
    اعتبار: 0
    تشکرها : 18
    ( 5 تشکر در 5 ارسال )
    ارسال: #5
    RE: منوی آکاردیونی
    کد PHP:
    [/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> 
    (آخرین ویرایش در این ارسال: ۱۳۹۴ آذر ۱۶ ۰۹:۳۵ عصر، توسط mohammad.mm540.)
    ۱۳۹۴ آذر ۱۶ ۰۹:۰۹ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    Alaa غایب
    علا عالم فلکی
    ***

    ارسال‌ها: 944
    تاریخ عضویت: ۱۳۹۲ فروردين ۲۰
    اعتبار: 52
    تشکرها : 744
    ( 663 تشکر در 478 ارسال )
    ارسال: #6
    RE: منوی آکاردیونی
    سلام،
    این لینک رو ببینین. [لینک]
    یه منوی آکاردیون با کلیک هست. آموزش هم داده که چه جوری میشه نوشت. اینجوری هرطور که خواستی میتونی تغییر بدی.
    __________________________________________________________________________
    ۱۳۹۴ آذر ۱۶ ۰۹:۲۹ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط :
    « قدیمی تر | تازه‌ تر »

    ارسال پاسخ
    پرش به انجمن:


    کاربرانِ درحال بازدید از این موضوع: 1 مهمان
    IranPHP.org | تماس با ما | بازگشت به بالا | بازگشت به محتوا | بایگانی | پیوند سایتی RSS