ارزدیجیتال
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

آموزش طراحی منو افقی برای وردپرس

CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند , وردپرس

در این آموزش قصد طراحی منو افقی وردپرس را با  html5 و css3 داریم.طراحی این منو به این صورت می باشد که ابتدا با استفاده از تگ های html جایگاه و آیتم های منو را ایجاد کرده و سپس با استفاده از css استایل و رنگ بندی های مورد نیاز را بر روی این منو اعمال می کنیم.

آموزش طراحی منو افقی برای وردپرس

 

برای زیبا تر شدن و خوانا شدن متن آیتم های منو, از فونت BKoodakBold استفاده می کنیم.این فونت را با استفاده از خاصیت font-face درون css3 فراخوانی می کنیم.در انتهای آموزش فایل فونت ها را می توانید دانلود کنید که اگر بخواهید از این فونت استفاده کنید بایستی پوشه فونت را هم درون پروژه خود قرار دهید.

شروع کار:

ابتدا کدهای مربوط به html را درون بدنه صفحه خود قرار دهید.برای طراحی منو علاوه بر تگ های div از تگ nav هم استفاده شده است که این خصوصیت مربوط به html5 می باشد.درون تگ ul=clearfix هم تابع فراخوانی موضوعات وردپرس را قرار می دهیم.

نکته :اگر بخواهید این منو را برای سایت هایی غیر از وردپرس استفاده کنید تنها کافی است به جای تابع موضوعات وردپرس تگ های li قرار دهید.

    <div id="nav-wrapper">
    <nav>
    <ul>
    <?php wp_list_cats('sort_column=NAME&optioncount=0&hierarchical=1'); ?>
    </ul>
    </nav>
    <div id="back-menu"></div>
    </div>
    در بخش css ابتدا فونت هایی که در پوشه Fonts داریم را با دستور font-face فراخوانی می کنیم.بنده در این جا دو نوع فونت را فراخوانی می کنیم که هر کدام یک را که مد نظر داشتید برای منو خود انتخاب کنید.

    @font-face {
    font-family:'BYekan';
    src: url('Fonts/BYekan.eot?#') format('eot'),
    url('Fonts/BYekan.woff') format('woff'),
    url('Fonts/BYekan.ttf') format('truetype');
    }
    @font-face {
    font-family:'BKoodakBold';
    src: url('Fonts/BKoodakBold.eot?#') format('eot'),
    url('Fonts/BKoodakBold.woff') format('woff'),
    url('Fonts/BKoodakBold.ttf') format('truetype');
    }

 

بقیه دستورات css منو:

در کدهای css این منو از gradient یا (تدارج رنگ) و transition یا (فاصله زمانی) استفاده شده است و چون ممکن است بعضی از مرورگر های قدیمی از این ویژگی ها پشتیبانی نکنند,ما برای هر مرورگر این کد مربوط به آن را قرار دادیم,پس برای همین حجم کدها زیاد شده است.

هنگامی که شما برای زیر منو ها هم ,زیر منو قرار دهید به صورت زیر نمایش داده می شوند:

آموزش طراحی منو افقی برای وردپرس

    #nav-wrapper
    {
    position: relative;
    z-index: 10;
    }
    #nav-wrapper nav
    {
    width: 100%;
    margin: 0 auto;
    position: relative;
    background:#cccaca;
    }
    #nav-wrapper nav ul
    {
    margin-right:1em;
    width:100%;
    float:right;
    }
    #nav-wrapper nav section li
    {
    float: left;
    }
    #nav-wrapper nav section ul
    {
    margin: 0 0 0 1em;
    width: 220px;
    float: left;
    }
    #nav-wrapper nav li
    {
    float: right;
    padding: 0 0 0 5px;
    list-style:none;
    }
    #nav-wrapper nav li a
    {
    display: block;
    text-decoration:none;
    font-family:'BKoodakBold';
    font-size:12px;
    padding: 5px 5px 7px;
    color: #4C4C4C; background: #eee;
    -moz-border-radius: 5px 5px 0 0;
    /* FF1+ */ -webkit-border-radius: 5px 5px 0 0;
    /* Saf3-4, iOS 1+, Android 1.5+ */
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-radius: 5px 5px 0 0; /* Opera 10.5, IE9, Saf5, Chrome */ background-color: #eee; background-image: -moz-linear-gradient(top, #eee, #eee, #eee, #eee, #eee, #D4D4D4); /* FF3.6 */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEEEEE), color-stop(0.8, #EEEEEE), color-stop(1, #D4D4D4)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#eee, #eee, #eee, #D4D4D4); /* Chrome 10+, Saf6 */ background-image: linear-gradient(top, #eee, #eee, #eee, #D4D4D4); -moz-transition: all 0.5s ease-out; /* FF3.7+ */ -o-transition: all 0.5s ease-out; /* Opera 10.5 */ -webkit-transition: all 0.5s ease-out; /* Saf3.2+, Chrome */ transition: all 0.5s ease-out;
    }
    #nav-wrapper nav li a:hover
    {
    background:#fada86;
    }
    #nav-wrapper nav li ul
    {
    padding: 5px 6px 6px;
    position: absolute;
    margin: 0; right: 0;
    width: 950px; top: -999em;
    z-index: 11; font-size:14px;
    }
    #nav-wrapper nav li:hover ul, .nav-hover
    {
    top: 25px;
    }
    #nav-wrapper nav li ul li
    {
    float: right;
    margin: 0; position:
    relative; padding: 7px 0;
    }
    #nav-wrapper nav li ul li a
    {
    padding: 3px 8px 4px;
    background: transparent;
    line-height: 1.3;
    border: 1px solid transparent;
    font-size: 0.92em;
    -moz-transition: none; /* FF3.7+ */
    -o-transition: 0; /* Opera 10.5 */
    -webkit-transition: 0; /* Saf3.2+, Chrome */
    transition: 0;
    }
    #nav-wrapper nav li ul li a:hover
    {
    background : #e5ad03;
    color:#666;
    box-shadow: 1.5px 1.5px 5px #cd9b03 inset;
    border-radius:5px;	
    }
    #nav-wrapper nav li ul li ul
    {
    position: absolute;
    z-index: 12;
    right: 0;
    width: 9em;
    background: #E8E8E8;
    background: rgba(232, 232, 232, 0.9);
    padding: 5px;
    -moz-box-shadow: 0 3px 7px #727272; /* FF3.5+ */
    -webkit-box-shadow: 0 3px 7px #727272; /* Saf3.0+, Chrome */
    box-shadow: 0 3px 7px #727272; /* Opera 10.5, IE9 */
    top: -999em;
    -moz-border-radius: 0 0 6px 6px; /* FF1+ */ -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px; -webkit-border-radius: 0 0 6px 6px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-radius: 0 0 6px 6px; /* Opera 10.5, IE9, Saf5, Chrome */ border: 1px solid #B5B5B5; border-top: none;
    }

    #nav-wrapper nav li:hover ul li ul
    {
    top: -999em; z-index: 1000000;
    }
    #nav-wrapper nav li ul li:hover ul, #nav-wrapper nav li ul li ul.nav-hover2 { top:40px;
    }
    #nav-wrapper nav li ul li ul li { float: none; padding: 0; z-index: 1000000; }
    #nav-wrapper nav li ul li ul li a { text-align: right; margin: 0 -5px; font-size: 0.9em; z-index: 1000000; }
    #nav-wrapper nav li ul li ul li.hide
    {
    display: none;
    }
    #back-menu
    {
    clear: both; height: 48px;
    background:url(images/bg-mainmenu.png);
    }
    #nav-wrapper div.a
    {
    clear: both;
    height: 48px;
    background:url(images/bg-mainmenu.png);
    -moz-box-shadow: 0 9px 5px -5px #999; /* FF3.5+ */
    -webkit-box-shadow: 0 9px 5px -5px #999;
    /* Saf3.0+, Chrome */
    box-shadow: 0 9px 5px -5px #999; /* Opera 10.5, IE9 */
    }
    .clearfix:after
    {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    }

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 8 CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=1941
کلمات کلیدی پست :
مطالب مرتبط
18,898اسکریپت صلوات شمار تاریخ : 2013/10/23
5,576حذف گزینه تغییر رمز از پیشخوان کاربران در وردپرس تاریخ : 2019/05/5
10,869اسکریپت ساخت فایل های Robots.txt تاریخ : 2017/11/14
15,784اسکریپت کاریابی آنلاین Joobs Box تاریخ : 2017/07/22
10,547اسکریپت ساخت سایت مپ Unlimited Sitemap Generator v6.0 تاریخ : 2015/02/10
10,430قالب برای قرار دادن نمونه کارها به صورت HTML و CSS3 تاریخ : 2014/03/7
11,844افزونه ایجاد صفحه معرفی اعضای تیم در وردپرس The Team Pro تاریخ : 2017/12/1
12,133افزونه حرفه ای مکعب نمونه کارها تاریخ : 2013/12/15
13,196اسکریپت مدیریت پروژه Freelance Cockpit 3 نسخه 3.3.0 تاریخ : 2019/05/2
1,180غیرفعال کردن ورود با ایمیل در وردپرس تاریخ : 2024/01/27
15,749اسکریپت ارتباط با مشتری و مدیریت پروژه Freelancer Office نسخه 1.7.4 تاریخ : 2015/11/1
12,016دانلود قالب HTML میزبانی وب HostingPress تاریخ : 2016/05/1
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file