چطور مانند این منو را ایجاد کنم

شروع موضوع توسط ateryad ‏20 دسامبر 2013 در انجمن برنامه نویسی سمت کاربر (Client Side)

  1. ateryad

    ateryad New Member

    ارسال‌ها:
    16
    تشکر شده:
    6
    امتیاز دستاورد:
    3
    با سلام دوستان عزیز
    چطور می توان منویی مانند منوی دسته بندی بالای سایت aparat.com ایجاد کرد.
    ممنون می شوم تا دوستان راهنمایی کنند.

    به دلیل نداشتن دکمه انتقال از تالارها دوبار این تاپیک رو نوشتم.
     
    نوشته شده توسط ateryad در ‏20 دسامبر 2013
    sorooshpardaz و mostafa8 از این پست تشکر کرده اند.
  2. jeyson

    jeyson Member

    ارسال‌ها:
    317
    تشکر شده:
    232
    امتیاز دستاورد:
    16
    سلام اون با AJAX نوشته شده و من بلد نیستم.
    اما اگه میخواین با سی اس اس کار کنین این یه مثال ساده(قسمت استایل)

    توجه :
    1- چون کد ها با CSS3 نوشته شدن برای اجرای صحیح حتما از آخرین نسخه مرورگر ها استفاده کنید مثلا firefox 14 و chrome 30
    2- من دیزاینش نکردم هدفم فقط یه مثال بود و دیزاین به عهده ی خودتون.


    نمونه کد ها :
    [PHPS]
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #test {
    font-size:20px;
    position:relative;
    width:200px;
    height: 27px;
    overflow:hidden;
    -moz-transition:ease 0.75s all;
    -webkit-transition:ease 0.75s all;
    -ms-transition:ease 0.75s all;
    -o-transition:ease 0.75s all;
    transition:ease 0.75s all;

    }
    #test:hover{
    height:200px;
    }
    </style>
    </head>


    <body>
    <div id="test">
    &nbsp;&nbsp;<a href="#"> Collect </a><br />
    <a href="#">test1</a> &nbsp;&nbsp;&nbsp;
    <a href="#">test2</a><br />
    <a href="#">test3</a> &nbsp;&nbsp;&nbsp;
    <a href="#">test4</a><br />
    <a href="#">test5</a> &nbsp;&nbsp;&nbsp;
    <a href="#">test6</a><br />
    <a href="#">test7</a> &nbsp;&nbsp;&nbsp;
    <a href="#">test8</a><br />
    <a href="#">test9</a> &nbsp;&nbsp;&nbsp;
    <a href="#">test10</a><br />


    </div>
    </body>
    </html>


    [/PHPS]

    ----------------------------------------------------
    موفق باشید.
     
    نوشته شده توسط jeyson در ‏21 دسامبر 2013
  3. آیسان ihsj

    آیسان ihsj New Member

    ارسال‌ها:
    5
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    با سلام سرچ کنید
    free menu ajax
    به نتایج خوبی میرسید
     
    نوشته شده توسط آیسان ihsj در ‏9 نوامبر 2016

به اشتراک بگذارید