Subtotal	0 تومان

آموزش html و css ساخت منوی سایدبار به صورت حرفه ای | پاسخ وردپرس |

بدون دیدگاه 1 دقیقه

مطالب پیشنهادی برای شما مهمان عزیز

آموزش طراحی قالب HTML و CSS طراحی منوی اصلی + آبشاری | پاسخ وردپرس |

آموزش HTML5 و CSS3 معرفی سلکتور و تنظیم پس زمینه در css | پاسخ وردپرس |

سلام خدمت تمام کاربران وب سایت پاسخ وردپرس درخدمت شما هستم با یکی دیگه از جلسات آموزشی html و css
توی این جلسه از آموزش میخواهیم یک منوی حرفه ای داخل ساید بار طراحی کنیم پس بامن همراه باشید

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

توی قدم اول میخواهیم فونت آیکون را برای قالب خود معرفی کنیم من میخواهم از فونت آسم استفاده کنم برای این
از لینک زیر فونت مورد نظر را دانلود نمایید

[checklist]

دانلود فونت آسم به صورت کامل

[/checklist]

منوی که خواهیم ساخت

بعد از این فونت مورد نظر دانلود کردید با زا حالت فشرده خارج کنید بعد به صورت کامل پوشه fontawesome کامل داخل پوشه
fonts قالب انتقال بدید برای فراخونی fontawesome داخل قالب به صورت زیر داخل head قالب اضافه نمایید .

  <link rel="stylesheet" href="fonts/fontawesome/font-awesome.min.css">

1	<link rel="stylesheet" href="fonts/fontawesome/font-awesome.min.css">

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

ساخت منوی سایدبار به صورت حرفه ای

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

            <aside class="cat-box">
                <header>
                <h3>    <i class="fa fa-navicon"></i>  دسته بندی مطالب</h3>
                </header>
                <nav>
                    <ul>
                        <li><a href="#">نرم افزار</a> </li>
                        <li><a href="#">موبایل </a> </li>
                        <li><a href="#">آموزشی</a> </li>
                        <li><a href="#">بازی</a> </li>
                        <li><a href="#">صوت فیلم </a> </li>
                        <li><a href="#">کتاب </a> </li>
                        <li><a href="#">گرافیک</a> </li>
                    </ul>
                </nav>
            </aside>

<h3> <i class="fa fa-navicon"></i> دسته بندی مطالب</h3>

</header>

<nav>

<ul>

<li><a href="#">نرم افزار</a> </li>

<li><a href="#">موبایل </a> </li>

<li><a href="#">آموزشی</a> </li>

<li><a href="#">گرافیک</a> </li>

</ul>

</nav>

</aside>

دقت داشته باشید که کدهای html5 استفاده کردم برای تعریف منو اول از همه یک aside تعریف کردم
داخل aside یک کلاس cat-box قرار دادم شما میتوانید هرچیزی اسم کلاس خود را قرار بدید .

بیشتر بخوانید :

آموزش طراحی قالب html و css طراحی footer نمایش آخرین های نرم افزار | پاسخ وردپرس |

کار بعدی که انجام دادم برای تعریف عنوان از header استفاده کردم که داخل یک تگ h3 و از فونت آسم استفاده کردم.

بعد از این عنوان را تعریف کردم برای ساخت منو از تگ HTML5 که تگ nav است
استفاده کردم که داخل یک تعداد ul قرار دادم.

استایل منوی سایدبار

برای استایل منوی از کد های زیر استفاده کردیم .

/*start cat box*/
.cat-box{
    background-color: #494f58;
    box-shadow: 0 0 10px #040404;
    margin-top: 20px;
}
.cat-box h3{
    color: #fff;
    font-size: 18px;
    padding: 15px;
    border-bottom: 1px solid #535a64;
    font-weight: 900;
}

/*start cat box*/

.cat-box{

background-color: #494f58;

box-shadow: 10px #040404;

margin-top: 20px;

}

.cat-box h3{

color: #fff;

font-size: 18px;

padding: 15px;

border-bottom: 1px solid #535a64;

font-weight: 900;

}

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

نتیجه کار به صورت تصویر زیر خواهد بود .

خوب این جلسه از آموزش html5 ز css3 به پایان رسید تا یکی دیگه از آموزش های وب سایت پاسخ وردپرس خدا نگهدار.

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

زمان الله ابراهیمی

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

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

دانلود فونت آسم به صورت کامل

منوی که خواهیم ساخت

ساخت منوی سایدبار به صورت حرفه ای

استایل منوی سایدبار

نظر شما در این‌باره چیست؟لغو پاسخ

نظر شما در این‌باره چیست؟
لغو پاسخ