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

عضویت ورود
[آموزش] آموزش ساخت منوی بازشو با css3 و html5
لطفا قبل از ايجاد تاپيک در انجمن ، با استفاده از کادر رو به رو جست و جو نماييد
درخواست مدیریت تبادل لینک
انجمن پاتوق دوستان آپلود سنتر پاتوق دوستان
جهت کسب اطلاعات بیشتر کلیک کنید

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

نمایش نتایج: از 1 به 1 از 1
Like Tree1پسند شده
  • مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی 1 Post By Mehdi

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

  1. Top | #1

    Mehdi آنلاین نیست.
    ورود به پروفایل ایشان
    قهرمان Demons attack قهرمان Garage Zombie - 48hr Jam Edition

    عنوان کاربر
    مدیریت انجمن
    تاریخ عضویت
    Jan 2013
    محل سکونت
    خونمون
    sonyericsson-c902
    INGLATERRA-Arsenal Persepolis
    091 NOD32 Windows-7 Google-Chrome
    male bihosele
    تشکر
    27,696
    از این کاربر 40,699 بار در 7,972 ارسال تشکر شده است.
    نوشته های وبلاگ
    145
    دارایی
    305,948
    اعتراض ها
    4
    اعتراض شده 28 بار در 27 پست
    میزان امتیاز
    250
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    موضوع 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 عزیز به خاطر این پست مفید تشکر کرده است: admin (01-12-2014)
    به سلامتی خودم که هر کی منو دید گفت چقد سرش شلوغه،
    ولی فقط خودم فهمیدم که چقد تنهام...!
    و.....
    سلامتی تو که همیشه تو دلت گفتی: این مگه با چند نفر دوسته که همیشه آنلاینه؟
    ولی یه جمله همیشه یادت باشه:
    همیشه آنلاین ترین ها تنهاترینن….

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  2. پاتوق دوستان پاتوق دوستان
    پاتوق دوستان پاتوق دوستان

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

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

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

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

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

منوی بازشو html

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

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

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

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

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

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

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

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

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

منو html5

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

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

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

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

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

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

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

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

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

منو بازشو

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

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

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

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

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

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

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

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

SEO by vBSEO ©2011, Crawlability, Inc.