031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » bootstrap » آموزش طراحی منو رسپانسیو Responsive

آموزش طراحی منو رسپانسیو Responsive

۲۴ام دی ۱۳۹۴
پشتیبانی وب یار
155

با آموزش منو ریسپانسیو Responsive واکنش گرا از تیم وب یار خدمت شما هستیم,اگر اصول کلی در مورد کدهای ریسپانسیو را نمیدانید و میخواهید صحفه ای ریسپانسیو بسازید حتما مطلب آموزش کدهای طراحی سایت ریسپانسیوResponsive را بخوانید.

آموزش طراحی منو ریسپانسیوResponsive

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

برای این کار ما از هیچ فریم ورکی استفاده نمیکنیم . خودمون با Media Query ها این کار رو به راحتی انجام میدیم .

اول از همه بذارید با منطق این موضوع آشناتون کنم . ما با استفاده از Media Queries میتونیم تعیین کنیم که صفحه ی وبمون تو هر رزولوشن به چه شکلی نمایش داده بشه . برای منویی که قراره ایجاد کنیم هم به همین صورت عمل می کنیم . یک منو طراحی می کنیم و با استفاده از media query و کدهای css تعیین می کنیم که در رزولوشن های بالا منو بصورت عادی نمایش داده بشه و در رزولوشن های پایین مثل موبایل و تبلت بصورت ریسپانسیو نمایش داده بشه . حالا باید این کار رو در کد پیاده کنیم .

آموزش طراحی سایت ریسپانسیو قسمت دوم:

همانند آموزش قبل متا تگ viewport را در قسمت head فایل html خود بنویسید.

<"meta name="apple-mobile-web-app-capable" content="yes >

<"meta name="viewport" content="width=device-width, initial-scale=1.0>

پس از نوشتن متا تگ های ضروری بالا در فایل html خود نوبت به کدهای اصلی منو در html میرسد.

ایجاد منو در کدهای html:

<nav>
    <a href="#" id="main-menu"></a>
    <ul id="top-menu">
    <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>
<li><a href="#">فروشگاه</a></li>
    </ul>
 </nav>

 

تا اینجای کار که یک منو بدون استایل داریم,بهتر یه مقدار به زیبا سازی منو بپردازیم, پس کدهای CSS زیر را برای استایل دهی به منو خود منویسیم.

nav{ width: 100%; height: 40px; background-color: #324E8D; margin: 0; padding: 0 30px 5px; position: relative;}

nav ul{display: block; width: auto; background-color: #324E8D; }

nav ul li{display: inline-block; position: relative;}

nav ul li>a{display: inline-block; font: 12px/27px BYekan; color: #fff; padding: 5px 15px 6px 8px;}

nav ul li>a:hover{color: #FEEF00;}

تا اینجای کار همانند کدنویسی های گذشته یک منو ساده به شکل زیر خواهیم داشت.

 

آموزش طراحی ریسپانسیو منو

آموزش طراحی ریسپانسیو منو

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

<a href=”#” id=”main-menu “></a>

برای این عنصر استایل زیر را در نظر میگیریم.

#main-menu{display: inline-block; width: 40px; height: 40px; background: url (“../img/icon.jpg”) center;}

 

حالا عنصر a ما که در اولین خط از کدهای html نوشتیم به این شکل نمایش داده میشود.

ایکون منو ریسپانسیو

چرا این آیکون را میگزاریم؟؟؟؟؟ زمانی که ما بخوایم با موبایل یا تبلت صفحه ی وب رو مشاهده کنیم ، منوی اصلی مخفی میشه و این آیکون نمایان میشه ، و شما با کلیک بر روی این آیکون میتونید گزینه های منو رو بصورت زیر منو و منوی کشویی مشاهده کنید .

پس در حالت عادی ما این آیکون رو نیاز نداریم و اون رو hidden می کنیم.

# main-menu {display: hidden; width: 40px; height: 40px; background:  url(“../img/icon.jpg “) center;}

حالا دیگه همه چیز آماده است,از این مرحله به بعد میخواهیم تعریف کنیم زمانی که این صفحه با موبایل یا تبلت باز میشه،  منوی ما از حالت عادی خارج بشه و به حالت ریسپانسیو تبدیل بشه . برای این کار از media query زیر استفاده می کنیم :

کدهای منو ریسپانسیو:

@media only screen and (max-width : 1024px) {

 # main-menu { display:inline-block;}

#top-menu {position: relative; z-index: 100000; padding-top: 9px;}

  nav ul {display: none; position: absolute; padding: 5px 0; z-index: 100000; border: 5px solid #444; right: 28px; top: 45px; width: 150px; border-radius: 4px 0 4px 4px;}

   nav li { text-align: right; width: 120px; padding:0; margin: 0;}

   nav:hover ul , nav:active ul { display: block;}

}

در کد بالا ما گفتیم برای رزولوشن های کمتر از ۱۰۲۴ پیکسل ، آیکون منوی ریسپانسیو نمایان بشه و منوی عادی مخفی بشه . حالا شما یک منوی ریسپانسیو دارید که در موبایل و تبلت قابل مشاهده هست.

پس در نهایت یه جمع یندی کلی از کدهامون داریم:

حالت عادی منو:

 

آموزش طراحی ریسپانسیو منو

حالت ریسپانسیو منو:

ایکون منو ریسپانسیو

حالت منو کشویی در ریسپانسیو:

اموزش طراحی منو ریسپانسیو

 

خب امیدواریم نهایت استفاده رو از این آموزش کرده باشید و یک منو ریسپانسیو زیبا ساخته باشید, با آموزش های بعدی از تیم وب یار همراه ما باشید.

آموزش طراحی منو رسپانسیو Responsive
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
پشتیبانی وب یار

مطالب مرتبط

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس در طول سال های گذشته وردپرس به یک سیستم مدیریت محتوای قوی تبدیل شده است. به طور پیش فرض وردپرس دارای مجموعه ای پست تایپ می باشد. به عنوان مثال برگه ها یا نوشته ها در وردپرس نوعی پست تایپ محسوب می شوند. با این وجود شما […]

طراحی گرافیک سایت

طراحی گرافیک سایت

طراحی گرافیکی سایت: اگر همه سعی و تلاش خود را پای این موضوع که کاربران فقط به سایت شما وارد شوند بگذارید، باید بدانید که کاملا در اشتباه هستید. اگر طراحی سایت از گرافیک خوبی برخوردار نباشد و برای کاربر جذابیتی نداشته باشد کاربر به محض ورود به سایت از سایت خارج می گردد و […]

طراحی سایت فروشگاهی

طراحی سایت فروشگاهی عرضه تخمه

طراحی سایت فروشگاهی عرضه تخمه طراحی سایت اختصاصی طعم آفرین بهاران عرضه کننده انواع تخمه های کدو / هندوانه و آفتابگردان وارداتی در اصفهان  از نمونه کارهای حرفه ای طراحی سایت تیم وب یار می باشد.طراحی سایت فروشگاهی طعم آفرین بهاران برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف فروش و عرضه […]

طراحی سایت خدماتی

طراحی سایت خدمات پزشکی اصفهان سمعک

طراحی سایت خدمات پزشکی اصفهان سمعک طراحی سایت اختصاصی اصفهان سمعک میلاد عرضه کننده انواع سمعک ها در اصفهان ، ارائه دهنده کلیه خدمات شنوایی سنجی در اصفهان از نمونه کارهای حرفه ای طراحی سایت تیم وب یار می باشد.طراحی سایت خدمات پزشکی اصفهان سمعک میلاد برای مشتریان عزیزی که کسب و کارشان در حوزه […]

ارسال دیدگاه

  1. اسما گفت:

    این عکسی که شما بجای آیکن استفاده کردید اگر بخوام خود آیکن را استفاده کنم به چه صورته؟

  2. اسما گفت:

    سلام
    ببخشید من تا حالا با مدیا جیکوری کار نکردم تو توضیحات منو، اون کدهای آخر مربوط به جیکوری رو نمیدونم باید کجا قرار بدم ،آیا باید کتابخونه جیکوری رو به فایلم اضافه کنم؟ کلن بهم بگید بایستی چکار کنم.
    متشکرم

  3. مصطفی نظری گفت:

    سلام
    ممنون

*    

*    

ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید