0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

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

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1245
تاریخ بروزرسانی 12 آوریل 2018

با آموزش منو ریسپانسیو 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;}

}

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

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

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

 

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

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

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

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

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

 

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

مطالب مرتبط
مطالعه :

در این مقاله میخواهیم به 13 نکته ای که در انتخاب دامین باید رعایت شوند اشاره کنیم. 13 نکته ای که در انتخاب دامین باید رعایت شوند در ابتدا باید تعریف مختصری از دامین به شما ارائه کنیم در ابتدا با یک مثال شروع میکنیم: فرض کنید شما برای راه اندازی کسب و کاری نیاز به یک مغازه دارید در این صورت یکی از مواردی که باید به آن توجه کرد نام و نشانی مغازه می باشد. در زمان انتخاب نشانی و اسم مغازه باید به این موضوع توجه داشته باشید که اینکار میتواند تاثیر بسیار زیادی بر روی آینده کاری شما داشته باشد.دامنه یا domain مانند نام و آدرس شما در فضای وب می باشد که برای انتخاب آن باید زمان مناسبی صرف کرد.     دامین از 3 بخش تشکیل شده: قسمت اول که شامل www میشود. قسمت دوم که همان نام وبسایت میباشد. قسمت سوم دامنه که پسوند یا Top Level Domain(TLD)نام دارد. در بالا متوجه شدید دامین چیست و از چه قسمت هایی تشکیل شده است.حال میخواهیم در انتخاب نام دامین نکاتی را به شما گوشزد کنیم.دقت داشته باشید که انتخاب نام دامین تاثیر بسیار زیادی در سئوی سایت و رتبه سایت شما در گوگل خواهد داشت.     1- دامنه کوتاه دامنه کوتاه بسیار راحت تر در ذهن کاربر میماند. 2- پسوند تک کلمه ای […]

مطالعه :

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

آموزش بازاریاب
مطالعه :

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

طراحی سایت خدماتی خرید بازیافت
مطالعه :

طراحی سایت خدماتی خرید بازیافت طراحی سایت خدماتی خرید بازیافت با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت اصفهان و سئو سایت وب یار است. این سایت در زمینه ی خرید و فروش ضایعات مانند ضایعات لوازم دست دوم, آلومینیوم, برنج, مس و… فعالیت دارد. طراحی سایت خدماتی خرید بازیافت برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف خرید و فروش ضایعات، نمایش محصولات و سایر حوزه های خدماتی می باشد بسیار مناسب است. آدرس سایت جهت مشاهده تمامی امکانات داخلی و گرافیکی سایت kharidbazyaft.com طراحی سایت های این چنینی، منجر به افزایش فروش و درآمد افراد در حوزه های مختلف کسب و کار می شود. در ادامه با هم امکانات این سایت که به تازگی توسط تیم طراحی سایت وب یار طراحی شده است را بررسی می کنیم. اگر شما هم نیاز به سایت خدماتی دارید، بهتر است این سایت را ببینید تا انتخاب آگاهانه تری در مورد انتخاب امکانات سایت خود داشته باشید؛ چرا که ممکن است در میان انتخاب امکانات سایت خود برخی از نیازهای سایت از خاطر شما دور مانده باشد. ویژگی ها از ویژگی های بارز طراحی این سایت خدماتی، طراحی سایت اختصاصی، طراحی سایت ارزان قیمت با حجم امکانات بالا در مقایسه با طراحی سایت های ارزان قیمت شرکت های غیر معتبر که برگرفته از قالب های […]

آموزش بازاریاب
مطالعه :

آموزش بازاریاب طراحی سایت این مقاله ادامه ی مقاله ی آموزش بازاریابی طراحی سایت می باشد که برای آموزش بازاریاب و آموزش افزایش فروش و درآمد نوشته شده است. اگر مقاله ی نخست را مطالعه کرده اید، برای خواندن ادامه ی مقاله و اتمام آموزش بازاریابی اصفهان تا پایان با تیم طراحی سایت اصفهان همراه باشید. پس از مواردی که در مقاله پیشین بیان شد و آخرین مطلب (نه نشنیدن را به عنوان بخشی از حرفه خود بپذیرید) بود به موارد زیر می پردازیم. آموزش بازاریاب طراحی سایت 1- از هر فرصتی برای مشتری یابی استفاده کند: یک کارشناس فروش حرفه ای هر فرصتی را غنیمت شمرده و به هر کس به عنوان مشتری بالقوه نگاه می کند. یک کارشناس فروش حرفه ای خود را محدود به دفتر کارش نمی کند؛ بلکه از هر فرصت ایجاد شده برای ارتباط با مشتریان به بهترین شکل ممکن استفاده می کند. برای مثال: شاید زمانی که در صف نانوایی و یا کارواش هستید فرصتی پیش بیاید تا یک مشتری را به سیستم کسب و کارتان اضافه کنید. 2- حرفه بازاریابی و فروش را دوست داشته باشید: یک بازاریاب به هیچ وجه از سر اجبار این شغل را انتخاب نمی کند، کسی که وارد این حرفه می شود باید با تمام وجودش شغلش را دوست داشته باشد وگرنه رشد و پیشرفتی در کار نخواهد […]

13تکنیک نوشتن عنوان جذاب برای محتوا
مطالعه :

ماجرا از آن جایی شروع می شود که کاربران اینترنتی با جستجوی عبارت مورد نظر خود در موتورهای جستجو با صفحه ای از نتایج به رو می شوند که این نتایج همان عناوین محتوای سایت های مختلف است. اکنون ادامه ماجرا به این عناوین بستگی دارد که تا چه حد می تواند کاربر را راضی کند که بر روی آن کلیک کرده و وارد سایت شود. جالب است بدانید از هر 10 نفر  ، 8 نفر عنوان محتوای شما را می خوانند ولی تنها 2 نفر بر روی آن کلیک می کنند! دلیل آن می تواند به مسائل زیادی برگردد که مهم ترین دلیل آن جذاب و تاثیرگذار نبودن عنوان محتوای شما است. عنوان محتوا در واقع اولین پل ارتباطی مخاطب با یک محتوا است. ممکن است محتوایی ضعیف‌تر از محتوای تولیدی شما به واسطه داشتن عنوان جذاب و تاثیر گذار بیشتر از محتوای شما دیده شود و کاربران زیادتری را به سمت خود جذب کند. نوشتن عناوین تاثیر گذار به هوش و یا استعداد خاصی نیاز ندارد ، بلکه فقط به دانستن نیاز دارد. دانستن یک سری نکات و تکنیک ها ! وقتی یک نفر توانسته چرا شما نتوانید؟ تنها کافی است به دو امتیاز دانش و تمرین مجهز شوید تا بتوانید عناوینی تاثیرگذار و جذاب خلق کنید. در این مقاله قصد داریم شما را به یکی از این […]

دیدگاه ها

۵ پاسخ به “آموزش طراحی منو رسپانسیو Responsive”

  1. زهرا گفت:

    سلام.ببخشی میشه کدمنوی ms csoftware . com رو بگن.ممنون میشم.هرچی گaتم پیدانکردم.منوهامم ار تی ال میکنم مثه اون نمیشه؟میشه خواهش کنم ب ایمیلم ارسال کنید.ممنون.

    • پشتیبانی وب یار گفت:

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

  2. اسما گفت:

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

  3. اسما گفت:

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

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

    سلام
    ممنون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *