نياز به كد منوي شناور

شروع موضوع توسط Nikpendar ‏18 آگوست 2005 در انجمن نرم‌افزارهای توسعه‌وب‌سایت (Sublime, VSCode و ...)

  1. Nikpendar

    Nikpendar Member

    ارسال‌ها:
    112
    تشکر شده:
    11
    امتیاز دستاورد:
    16
    من جهت تكميل پروژه‌ام نياز به كد منوي شناور دارم. اگر دوستان لطف كنند و كد آن را در اين تاپيك قرار بدهند ممنون مي‌شوم.

    ...
     
    نوشته شده توسط Nikpendar در ‏18 آگوست 2005
  2. irania

    irania Member

    ارسال‌ها:
    263
    تشکر شده:
    3
    امتیاز دستاورد:
    16
    اتفاقا منم دنبال همین کدم! آقایون و خانوما لطفا هر کسی در این خصوص اطلاع داره ما رو هم مطلع کنه! خیلی ممنون میشم!
     
    نوشته شده توسط irania در ‏18 آگوست 2005
  3. shah_ram

    shah_ram New Member

    ارسال‌ها:
    20
    تشکر شده:
    2
    امتیاز دستاورد:
    1
    کد منوی شناور!
    فقط باید جای کلمات تست منوی مورد نظرتونو بنویسید و جای مجید آنلاین.کام لینک مورد نظرتونو بزارید!!
    ===============================================================
    <script>
    if (!document.layers)
    document.write('<div id="divStayTopLeft" style="position:absolute">')
    </script>

    <layer id="divStayTopLeft">

    <!--EDIT BELOW CODE TO YOUR OWN MENU-->
    <table border="1" width="130" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100%" bgcolor="#FFFFCC">
    <p align="center"><b><font size="4">Menu</font></b></td>
    </tr>
    <tr>
    <td width="100%" bgcolor="#FFFFFF">
    <p align="left">تست</a><br>
    <a href="http://www.majidonline.com">تست</a><br>
    <a href="http://www.majidonline.com">تست</a><br>
    <a href="http://www.majidonline.com">تست</a><br>
    <a href="http://www.majidonline.com">تست</a></td>
    </tr>
    </table>
    <!--END OF EDIT-->

    </layer>


    <script type="text/javascript">

    /*
    Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
    Script featured on/available at http://www.dynamicdrive.com/
    This notice must stay intact for use
    */

    //Enter "frombottom" or "fromtop"
    var verticalpos="frombottom"

    if (!document.layers)
    document.write('</div>')

    function JSFX_FloatTopDiv()
    {
    var startX = 3,
    startY = 150;
    var ns = (navigator.appName.indexOf("Netscape") != -1);
    var d = document;
    function ml(id)
    {
    var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
    if(d.layers)el.style=el;
    el.sP=function(x,y){this.style.left=x;this.style.top=y;};
    el.x = startX;
    if (verticalpos=="fromtop")
    el.y = startY;
    else{
    el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
    el.y -= startY;
    }
    return el;
    }
    window.stayTopLeft=function()
    {
    if (verticalpos=="fromtop"){
    var pY = ns ? pageYOffset : document.body.scrollTop;
    ftlObj.y += (pY + startY - ftlObj.y)/8;
    }
    else{
    var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
    ftlObj.y += (pY - startY - ftlObj.y)/8;
    }
    ftlObj.sP(ftlObj.x, ftlObj.y);
    setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("divStayTopLeft");
    stayTopLeft();
    }
    JSFX_FloatTopDiv();
    </script>
     
    نوشته شده توسط shah_ram در ‏19 آگوست 2005
    echessdesign و navid.sincere از این پست تشکر کرده اند.
  4. Mahdi

    Mahdi کاربر متخصص انجمن بُرداری

    ارسال‌ها:
    2,265
    تشکر شده:
    4,022
    امتیاز دستاورد:
    113
    سلام دوست عزيز
    با نرم افزارهاي مربوطه تسلط بيشتري روي منوي خودت داري مثل
    allwebmenu
    sothink dhtml menu
    موفق باشيد
    مهدي
     
    نوشته شده توسط Mahdi در ‏22 آگوست 2005
  5. ~negin~

    ~negin~ New Member

    ارسال‌ها:
    13
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    شکیل تر ازین نیست؟
     
    نوشته شده توسط ~negin~ در ‏29 اکتبر 2013
  6. tarenoco

    tarenoco Member

    ارسال‌ها:
    216
    تشکر شده:
    14
    امتیاز دستاورد:
    18
    برای اینکه به سورس های خوبی دسترسی داشته باشین یه سری به این سایت بزنید
    htmldrive.net
     
    نوشته شده توسط tarenoco در ‏2 فوریه 2014
  7. ~negin~

    ~negin~ New Member

    ارسال‌ها:
    13
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    کاش کدهای خوشگل تری هم بود
     
    نوشته شده توسط ~negin~ در ‏15 فوریه 2014
  8. tarenoco

    tarenoco Member

    ارسال‌ها:
    216
    تشکر شده:
    14
    امتیاز دستاورد:
    18
    در این مطلب آموزشی از بخش آموزش های وردپرس روکش می خواهیم نحوه ساخت منو کشویی (آبشاری) برای وردپرس را به صورت گام به گام برای شما بیان کنیم. این مطلب آموزشی را بگونه ای پیش خواهیم برد که شما با اصول اولیه ساخت یک منو توسط css و html آشنا شوید و علوه بر تسلط کامل بر ساخت منو کشویی برای وردپرس بتوانید برای سیستم های محتوای دیگر یا حتی قالب های html نیز به راحتی یک منو زیبای کشویی یا همان منو آبشاری ایجاد کنید.

    [h=2]گام اول : نوشتن markup HTML منو کشویی[/h] برای ساخت یک منو کشویی ما باید در ابتدا markup HTML آن را بنویسیم. بهترین تگ html برای ساخت یک منو کشویی تگ ul می باشد. در اصل این تگ برای فهرست کردن موضوعات در یک سند html می باشد اما ما می توانیم از آن جهت ساخت یک منو آبشاری نیز استفاده کنیم. یک نمونه ساده از markup HTML یک منو کشویی با استفاده از تگ ul مانند زیر می باشد.
    <ul>
    <li></li>
    <li>
    <ul>
    <li></li>
    <li></li>
    </ul>
    </li>
    <li></li>
    <li></li>
    </ul>
    همانطور که در خط چهارم می بینید ما بین تگ باز و بسته li یک تگ باز و بسته ul دیگر قرار دادیم به همین ترتیب می توان به صورت پله ای بی نهایت تگ ul و li را درون هم قرار داد. تنها باید به این نگته توجه کرد که ما فقط مجاز به استفاده از تگ li در تگ ul می باشیم. در تگ li هم می توانیم از اکثر تگ های html استفاده کنیم.
    حال که با markup HTML کلی یک منو آبشاری آشنا شدید نگاهی به کد های html زیر بیندازید.
    <nav>
    <ul>
    <li><a>خانه</a></li>
    <li><a>دسته بندی ها</a>
    <ul>
    <li><a>قالب وردپرس</a>
    <ul>
    <li><a>قالب شخصی</a></li>
    <li><a>قالب شرکتی</a></li>
    </ul>
    </li>
    <li><a>آموزش وردپرس</a></li>
    </ul>
    </li>
    <li><a>درباره ما</a></li>
    <li><a>تماس با ما</a></li>
    </ul>
    </nav>
    در کد بالا ما ۴ عنوان اصلی داریم که یکی از آنها شامل دو زیر مجموعه می باشد به همین ترتیب یک از زیر مجموعه ها نیز دارای ۲ زیر مجموعه دیگر می باشد. بعد از اینکه این کد را در یک صفحه با فرمت html ذخیره کردید نتیجه کار مانند زیر می شود.
    [​IMG]
    خوب حال یک سوال ممکن است برای شما پیش آید که: آیا برای ساخت یک منو کشویی در وردپرس نیز باید کد های html را به صورت دستی وارد کنم؟
    برای افزودن منو به قالب وردپرس شما هم می توانید کد های html منو را به صورت دستی وارد کنید و هم می توانید از قابلیت فهرست های وردپرس بهره بگیرید. به نظر من بهترین گزینه برای مدیریت منو در وردپرس استفاده از فهرست ها می باشد. در حقیقت وقتی ما با استفاده از فهرست های وردپرس یک منو را به قالب اضافه می کنیم وردپرس همان کاری را انجام می دهد که ما در بالا بصورت دستی انجام دادیم. یعنی وردپرس طبق خواسته شما کد های html منو را می سازد. از ویژگی ها بارز کد های html خروجی فهرست های وردپرس می توان به موارد زیر اشاره کرد:

    • سرعت بالا در ساخت منو ها
    • فراهم آوردن امکانات مدیریتی آسان برای منو ها
    • افزودن کلاس های html خاص به منو ها
    • قابلیت مدیریت چندین منو در یک بخش
    [h=3]چگونه از فهرست های وردپرس استفاده کنیم؟[/h] برای استفاده از فهرست ها ابتدا باید کد زیر را به فایل فانکسن قالب سایت خود اضافه کنید.
    function register_my_menus() {
    register_nav_menus(
    array(
    'top-menu' => __( 'منو بالا' )
    )
    );
    }

    add_action( 'init', 'register_my_menus' );
    در کد بالا top-menu شناسه منو و “منو بالا” نام منو می باشد. برای داشتن منو های بیشتر می توانید مانند زیر اقدام کنید.
    function register_my_menus() {
    register_nav_menus(
    array(
    'top-menu' => __( 'منو بالا' ),
    'main-menu' => __( 'منو میانی' ),
    'footer-menu' => __( 'منو پایین' )
    )
    );
    }

    add_action( 'init', 'register_my_menus' );
    حال باید با استفاده از کد زیر منو را در قالب فراخوانی کنیم.
    <?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' =>'nav', 'menu_class' =>'topnav' ) ); ?>
    در این کد ما منو با شناسه top-menu را فراخوانی کرده ایم. ما این کد را در فایل header.php قرار می دهیم تا در بالای تمامی صفحات دیده شود.
    حال وارد مسیر داشبورد > نمایش > فهرست ها شوید و یک منو به شکل زیر ایجاد کنید سپس در بخش پایین صفحه یعنی جایگاه‌ها در پوسته جایگاه این فهرست را مشخص کنید.
    [​IMG]
    پس از ذخیره فهرست قالب خود را باز کنید, می بینید که فهرستی که ساخته اید در قالب شما به نمایش در می آید.
    [​IMG]
    [h=2]گام دوم: تغییر ظاهر منو کشویی با استفاده از css[/h] حال نوبت به تغییر ظاهر منو می رسد. در این مرحله ما به شما می گوییم که چگونه می توانید برای یک منو آبشاری کد های CSS را بنویسد. تمام کد هایی که در اینجا معرفی می کنیم را باید در فایل style.css قالب فعلی سایت خود قرار دهید.
    در ابتدا با استفاده از کدهای css زیر رنگ پس زمینه, ارتفاع, فاصله منو از اطراف و عرض کل قسمت منو در قالب را مشخص می کنیم.
    nav {
    background: none repeat scroll 0 0 #708090;
    height: 40px;
    margin: 0 auto;
    width: 1000px;
    }
    [​IMG]
    حال با استفاده از کد های زیر تمام تگ های ul موجود در منو را از حالت لیست بودن خارج می کنیم و فاصله هایی که به صورت پیش فرض توسط مرورگر ها به تگ ul اضافه می شود را بر می داریم.
    nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    }
    [​IMG]
    حال نوبت به تگ li می رسد. کد های زیر برای این تگ نوشته شده اند که باید به همین ترتیب نیز در فایل style.css قالب قرار گیرند.
    nav > ul > li {
    background: none repeat scroll 0 0 #87CEEB;
    border-left: 1px solid #73BAD7;
    display: block;
    float: right;
    }
    nav ul li {
    margin: 0;
    position: relative;
    }
    [​IMG]
    حال نوبت به لینک ها می رسد. کد های css زیر برای لینک های منو نوشته شده اند که باعث می شوند تا این منو شکل یک منو واقعی را به خود بگیرد.
    nav > ul > li > a {
    padding: 10px 20px;
    }
    nav ul li a {
    color: #0000FF;
    display: block;
    float: right;
    font-family: tahoma;
    font-size: 15px;
    padding: 10px 15%;
    text-decoration: none;
    }
    [​IMG]
    تا اینجای کار خوب پیش رفتیم. منو تقریبا کامل است اما هنوز نمی توان زیر منو ها را از منو های اصلی تشخیص داد و با حرکت موس روی عنوان های اصلی زیر منو های آنها را دید. حال با افزودن کد های زیر به فایل style.css قالب دیگر منو شکل واقعی خود را می گیرد و با حرکت دادن موس روی منو های اصلی زیر منو آنها ظاهر می شود.
    nav ul li ul {
    background: none repeat scroll 0 0 #708090;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 100%;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    width: 170px;
    }
    nav ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    }
    nav ul li ul li ul {
    border-right: 1px solid #5D6D7D;
    right: 100%;
    top: 0;
    }
    nav ul li ul li a {
    border-bottom: 1px solid #637383;
    color: #FFFFFF;
    text-align: right;
    width: 70%;
    }
    [​IMG]
    خوب کار تغییر ظاهر منو هم در اینجا تمام شد. امیدواریم تا این آموزش توانسته باشد به شما کمک کند. در صورت داشتن هرگونه پرسشی در باره منوهای کشویی وردپرس آن را با ما در میان بگذارید.
    [h=3]کد کامل css جهت تغییر ظاهر منو آبشاری (کشویی):[/h] nav {
    background: none repeat scroll 0 0 #708090;
    height: 40px;
    margin: 30px auto 0;
    width: 1000px;
    }
    nav ul li a {
    color: #485868;
    display: block;
    float: right;
    font-family: tahoma;
    font-size: 15px;
    padding: 10px 15%;
    text-decoration: none;
    }
    nav > ul > li > a {
    padding: 10px 20px;
    }
    nav ul li {
    margin: 0;
    position: relative;
    }
    nav ul li ul {
    background: none repeat scroll 0 0 #708090;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 100%;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    width: 170px;
    }
    nav ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    }
    nav ul li ul li ul {
    border-right: 1px solid #5D6D7D;
    right: 100%;
    top: 0;
    z-index: 2;
    }
    nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    }
    nav > ul > li {
    background: none repeat scroll 0 0 #87CEEB;
    border-left: 1px solid #73BAD7;
    display: block;
    float: right;
    }
    nav ul li ul li a {
    border-bottom: 1px solid #637383;
    color: #333333;
    float: none;
    text-align: right;
    width: 70%;
    z-index: 2;
    }
    nav ul li ul li {
    clear: both;
    display: block;
    float: none;
    position: relative;
    width: 100%;
    z-index: 2;
    }
    [​IMG]
     
    نوشته شده توسط tarenoco در ‏23 فوریه 2014
  9. tarenoco

    tarenoco Member

    ارسال‌ها:
    216
    تشکر شده:
    14
    امتیاز دستاورد:
    18
    بله با توجه به کد های بالا میشه و البته با یکم تغییر می تونید به نتیجه دلخواه برسید
     
    نوشته شده توسط tarenoco در ‏28 می 2014

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