کاربر گرامی با عرض سلام، تقاضا داریم جهت استفاده از حداکثر امکانات در سایت عضو شوید یا از کاربری فعلی خود وارد شويد . با تشکر

عضویت ورود
[آموزش] آموزش ساخت منوی بازشو با css3 و html5
وارد نشده اید
انجمن تخصصی تفریحی پاتوق دوستان بهترین مکان برای دیده شدن! سفارش دهید.
منو سایت آنلاین ها
آپلود سنتر
بازی آنلاین
فــال حافظ
چــت روم
  • کاربر برتر
  • مدیر برتر
  • کاربر قدیمی
بخش مورد نظر خود را انتخاب کنید
  • تاپیکهای برتر انجمن
  • تاپیکهای مهم انجمن
  • تاپیکهای آموزشی انجمن
Banner Banner
موقعیت شما :

کاربران برچسب زده شده

نمایش نتایج: از 1 به 1 از 1
Like Tree1پسند شده
  • پاتوق دوستان 1 Post By Mehdi

موضوع: آموزش ساخت منوی بازشو با css3 و html5

  1. #1

    قهرمان Demons attack قهرمان Garage Zombie - 48hr Jam Edition پاتوق دوستان پاتوق دوستان پاتوق دوستان پاتوق دوستان پاتوق دوستان پاتوق دوستان پاتوق دوستان پاتوق دوستان پاتوق دوستان پاتوق دوستان پاتوق دوستان Mehdi آواتار ها
    تاریخ عضویت
    Jan 2013
    شماره عضويت
    3
    عنوان کاربر
    مدیریت انجمن
    محل سکونت
    خونمون
    سن
    25
    نوشته ها
    8,928
    sonyericsson-c902
    INGLATERRA-Arsenal Persepolis
    091 Google-Chrome
    male bikhab
    تشکر
    28,772
    از این کاربر 42,203 بار در 8,495 ارسال تشکر شده است.
    نوشته های وبلاگ
    147
    دارایی
    376,618
    اعتراض ها
    8
    اعتراض شده 48 بار در 44 پست
    میزان امتیاز
    421

    Aa98789cfb69 آموزش ساخت منوی بازشو با css3 و html5

    سلام ، امروز میخواهیم طریقه ایجاد یک منوی بازشو با CSS3 و HTML5 را با هم یاد بگیریم. می دانیم که امروزه منوهای بازشو در طراحی صفحات وب بسیار کاربرد دارند و می توانیم از آنها در زیبایی سایت خود و دسترسی آسان به صفحات دیگر استفاده کنیم.در ابتدا ما از کدهای html که در ایجاد منو به ما کمک می کنند و کاربرد دارند استفاده می کنیم.
    برای اینکار ابتدا یک تگ nav ساخته ، سپس شروع به ساخت منو با استفاده از تگ ( ul ) می کنیم. همانطور که در کدهای زیر می بینید ما یک لیست نامرتب ( ul ) با کدهای استاندارد داریم که باید در قسمت Navigation قرار گیرد.



    آموزش ساخت منوی بازشو با css3 و html5


    آموزش ساخت منو بازشو
    مرحله اول – HTML
    ابتدا قسمت HTML5 هستش. برای این کار کد مورد نظر رو در صفحه مورد نظر قرار دهید :
    کد:
    <!doctype html>
    <html>
    <head>
    
    
     <meta charset="UTF-8">
     <title>How to create Pop-up menu with CSS3 and HTML5 (OlomRayaneh.Org)</title>
     <!--[if lt IE 9]>
      <script src="http://olomrayaneh.org/sites/themes/olomrayaneh/js/html5.js"></script>
     <![endif]-->
    
    
    </head>
    <body>
    
    
    <nav>
     <ul>
      <li class="first"><a href="http://olomrayaneh.org/">Home</a></li>
      <li><a href="http://olomrayaneh.org/">About</a>
       <ul>
        <li><a href="http://olomrayaneh.org/">Me</a></li>
        <li><a href="http://olomrayaneh.org/">Team</a></li>
        <li><a href="http://olomrayaneh.org/">Site</a></li>
       </ul>
      </li>
      <li><a href="http://olomrayaneh.org/">Category</a>
       <ul>
        <li><a href="http://olomrayaneh.org/">HTML</a></li>
        <li><a href="http://olomrayaneh.org/">CSS</a></li>
        <li><a href="http://olomrayaneh.org/">Java</a></li>
        <li><a href="http://olomrayaneh.org/">SEO</a></li>
       </ul>
      </li>
      <li><a href="http://olomrayaneh.org/">Portfolio</a>
       <ul>
        <li><a href="http://olomrayaneh.org/">Web</a></li>
        <li><a href="http://olomrayaneh.org/">Print</a></li>
        <li><a href="http://olomrayaneh.org/">Photos</a></li>
        <li><a href="http://olomrayaneh.org/">Videos</a></li>
       </ul>
      </li>
      <li><a href="http://olomrayaneh.org/">Ads</a></li>
      <li><a href="http://olomrayaneh.org/">Service</a></li>
      <li><a href="http://olomrayaneh.org/">Contact</a></li>
     </ul>
    </nav>
    
    
    </body>
    </html>
    پس از اتمام کدهای html ، حالا نوبت css3 است :

    مرحله دوم – طرح بندی منو بازشو
    ابتدا ما تغییراتی را در تگ nav انجام می دهیم . اول برای تعیین ویژگی کلی صفحه پهنا و ارتفاع صفحه و اندازه قلم را تعیین می کنیم . البته ممکن است با تغییر قلم همترازی پهنا و ار تفاع تغییر کند ولی مسئله ای پیش نمی آید. سپس خط بعدی کد زیر list-style :none قرار داده تا شکل های کنار لیست را پاک کنیم.


    کد:
    *{ margin:0px; padding: 0px; }
    
    
    nav {
        font-family: arial, sans-serif;
        position: relative;
        width: 390px;
        height:56px;
        font-size:14px;
        color:#999;
        margin: 0 auto;
        padding: 0;
        border: none;
        outline: none;
        float: left;
    }
    nav ul {
        list-style-type: none;
        height: 40px;
        width: 535px;
    
    
        background: #4c4e5a;
        background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    
    
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }




    این تکه کد زیر مرحله مهم ساختن نوار منو است . اگر ما خصوصیت flot :left قرار دهیم تگ nav ما را به حالت شناور در می آورد . و لیست ما از حالت پلکانی به صورت عمودی و کنار هم در می آید . فراموش نکنید که خصوصیت Position : relative انتخاب کرده تا لیست نمونه کار به عنوان والد معرفی شود ، زیرا منوی باز شو ما باید توسط آن حمایت و به جلو برده شود.

    کد:
    nav ul li {
        float: left;
        position: relative;
        list-style: none;
        display: block;
        height: 40px;
    }
    حالا نوبت دادن مقدار به لینک های لیست ما می باشد . که محل قرارگیری متن را مرکز قرار داده و برای آیتم های لیست یک حاشیه راست درست می کنیم .

    کد:
    nav ul li a {
        display: block;
        padding: 0 14px;
        margin: 6px 0;
        line-height: 28px;
        text-decoration: none;
    
    
        border-left: 1px solid #393942;
        border-right: 1px solid #4f5058;
    
    
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 13px;
    
    
        color: #f3f3f3;
        text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    
    
        -webkit-transition: color .2s ease-in-out;
        -moz-transition: color .2s ease-in-out;
        -o-transition: color .2s ease-in-out;
        -ms-transition: color .2s ease-in-out;
        transition: color .2s ease-in-out;
    }


    این دو مرحله مهمترین مراحل در این خودآموز می باشد . که به وسیله آن می توانیم به منوی بازشو با قابلیت دلخواه برسیم .


    بخش اول کد مربوط به دومین تگ < ul> ما می باشد که با مقداردهی خصوصیت display : none از قرار گرفتن المانی در تگ nav جلوگیری می کنیم .


    بخش دوم کد نیز برای اینکه المان کل سطر خود را اشغال کند خصوصیت display را با block مقدار دهی می کنیم.


    سپس ویژگی position منوی بازشو را برای اینکه به صورت زیر هم باشد ، absolute قرار می دهیم.





    کد:
    nav ul li ul {
        display: none;
    }
    nav ul li:hover ul {
        display: block;
        position: absolute;
        width: auto;
        height: auto;
    }
    در نهایت یکسری خصوصیات به منوی بازشو مانند پهنا ، رنگ پس زمینه ، محل قرار گیری متن و مقدار حاشیه به آن اضافه کرده که شما میتوانید طبق طرح خود آنها را تغییر دهید .

    کد:
    nav ul li:hover ul li a {
        display:block;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        color:#fff;
        width: auto;
        text-align: center;
        border-right: none;
    }
    nav ul li:hover ul li a:hover {
        color:#8fde62;
    }
    nav li:first-child a { border-left: none; }
    nav li:last-child a{ border-right: none; }
    
    
    nav li:hover > a { color: #8fde62; }



    کد های کامل CSS3 منوی بازشو
    کد:
    *{ margin:0px; padding: 0px; }
    
    
    nav {
        font-family: arial, sans-serif;
        position: relative;
        width: 390px;
        height:56px;
        font-size:14px;
        color:#999;
        margin: 0 auto;
        padding: 0;
        border: none;
        outline: none;
        float: left;
    }
    nav ul {
        list-style-type: none;
        height: 40px;
        width: 535px;
    
    
        background: #4c4e5a;
        background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    
    
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    nav ul li {
        float: left;
        position: relative;
        list-style: none;
        display: block;
        height: 40px;
    }
    nav ul li a {
        display: block;
        padding: 0 14px;
        margin: 6px 0;
        line-height: 28px;
        text-decoration: none;
    
    
        border-left: 1px solid #393942;
        border-right: 1px solid #4f5058;
    
    
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 13px;
    
    
        color: #f3f3f3;
        text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    
    
        -webkit-transition: color .2s ease-in-out;
        -moz-transition: color .2s ease-in-out;
        -o-transition: color .2s ease-in-out;
        -ms-transition: color .2s ease-in-out;
        transition: color .2s ease-in-out;
    }
    nav ul li ul {
        display: none;
    }
    nav ul li:hover ul {
        display: block;
        position: absolute;
        width: auto;
        height: auto;
    }
    nav ul li:hover ul li a {
        display:block;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        color:#fff;
        width: auto;
        text-align: center;
        border-right: none;
    }
    nav ul li:hover ul li a:hover {
        color:#8fde62;
    }
    nav li:first-child a { border-left: none; }
    nav li:last-child a{ border-right: none; }
    
    
    nav li:hover > a { color: #8fde62; }

    کد کامل ساخت منو بازشو با CSS3 و HTML5

    کد:
    <!doctype html>
    <html>
    <head>
     <meta charset="UTF-8">
     <title>How to create Pop-up menu with CSS3 and HTML5 (OlomRayaneh.Org)</title>
      <!--[if lt IE 9]>
       <script src="http://olomrayaneh.org/sites/themes/olomrayaneh/js/html5.js"></script></script>
     <![endif]-->
    
    
     <style>
    
    
    *{ margin:0px; padding: 0px; }
    
    
    nav {
        font-family: arial, sans-serif;
        position: relative;
        width: 390px;
        height:56px;
        font-size:14px;
        color:#999;
        margin: 0 auto;
        padding: 0;
        border: none;
        outline: none;
        float: left;
    }
    nav ul {
        list-style-type: none;
        height: 40px;
        width: 535px;
    
    
        background: #4c4e5a;
        background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
        background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    
    
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    nav ul li {
        float: left;
        position: relative;
        list-style: none;
        display: block;
        height: 40px;
    }
    nav ul li a {
        display: block;
        padding: 0 14px;
        margin: 6px 0;
        line-height: 28px;
        text-decoration: none;
    
    
        border-left: 1px solid #393942;
        border-right: 1px solid #4f5058;
    
    
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 13px;
    
    
        color: #f3f3f3;
        text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    
    
        -webkit-transition: color .2s ease-in-out;
        -moz-transition: color .2s ease-in-out;
        -o-transition: color .2s ease-in-out;
        -ms-transition: color .2s ease-in-out;
        transition: color .2s ease-in-out;
    }
    nav ul li ul {
        display: none;
    }
    nav ul li:hover ul {
        display: block;
        position: absolute;
        width: auto;
        height: auto;
    }
    nav ul li:hover ul li a {
        display:block;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        color:#fff;
        width: auto;
        text-align: center;
        border-right: none;
    }
    nav ul li:hover ul li a:hover {
        color:#8fde62;
    }
    nav li:first-child a { border-left: none; }
    nav li:last-child a{ border-right: none; }
    
    
    nav li:hover > a { color: #8fde62; }
     </style>
        </head>
        <body>
    <nav>
     <ul>
      <li class="first"><a href="http://olomrayaneh.org/">Home</a></li>
      <li><a href="http://olomrayaneh.org/">About</a>
       <ul>
        <li><a href="http://olomrayaneh.org/">Me</a></li>
        <li><a href="http://olomrayaneh.org/">Team</a></li>
        <li><a href="http://olomrayaneh.org/">Site</a></li>
       </ul>
      </li>
      <li><a href="http://olomrayaneh.org/">Category</a>
       <ul>
        <li><a href="http://olomrayaneh.org/">HTML</a></li>
        <li><a href="http://olomrayaneh.org/">CSS</a></li>
        <li><a href="http://olomrayaneh.org/">Java</a></li>
        <li><a href="http://olomrayaneh.org/">SEO</a></li>
       </ul>
      </li>
      <li><a href="http://olomrayaneh.org/">Portfolio</a>
       <ul>
        <li><a href="http://olomrayaneh.org/">Web</a></li>
        <li><a href="http://olomrayaneh.org/">Print</a></li>
        <li><a href="http://olomrayaneh.org/">Photos</a></li>
        <li><a href="http://olomrayaneh.org/">Videos</a></li>
       </ul>
      </li>
      <li><a href="http://olomrayaneh.org/">Ads</a></li>
      <li><a href="http://olomrayaneh.org/">Service</a></li>
      <li><a href="http://olomrayaneh.org/">Contact</a></li>
     </ul>
    </nav>
    
    
        </body>
    </html>
    تبریک میگم. این منوی فوق العاده به سادگی ساخته شد. از این منو لذت ببرید.


    موضوعات مشابه:
    Esmail پسند کردن.

     افراد زیر تشکر کرده اندکاربر مقابل از Mehdi عزیز به خاطر این پست مفید تشکر کرده است:



    آموزش ساخت منوی بازشو با css3 و html5

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

بازدید کنندگان با جستجو های زیر این صفحه را پیدا کرده اند

آموزش ساختن منوی بازشو توسط css

منوی بازشو html

آموزش ساخت منوی افقی بازشو با css

آموزش ساخت منوی بازشو با css

درست کردن منوي بازشوي افقي با html

آموزش ساخت منوی عمودی بازشو با css

آموزش ساخت منو افقی بازشو

آموزش ساخت منوی افقی باز شو با css

آموزش طراحی منوی بازشو باcss3

آموزش ساخت منوی بازشو با css3

آموزش ساخت منو بازشو همراه با تصاویر

منو html5

ساخت منوی بازشو css

ساخت منوی بازشو

منوی باز شو افقی در html

آموزش منو بازشو css

ساخت منوی موضوعات باز شو

ساخت منو باز شو

ساخت منو بازشو با css3

کدهای ساخت منوی بازشو

آموزش منوهای بازشو زیر هم با html

منو بازشو

تگ های منوی درختی بازشو

ساخت منوی بازشو در html

کد html منو افقی باز شو

کلمات کلیدی این موضوع

علاقه مندي ها (Bookmarks)

علاقه مندي ها (Bookmarks)

Open مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
Copyright...

پاتوق دوستان از بهمن ماه سال 91 با عنوان نخستین انجمن دوستان و یاران همیشگی در ایران شروع به کار کرده و مفتخر است که تا کنون توانسته به نحو احسن فضایی دوستانه و صمیمی و با نشاط تامل بر انگیز برای کاربران خود به ارمغان بیاورد .


SEO by vBSEO ©2011, Crawlability, Inc.