031- 344 500 60

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

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

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

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

با آموزش منو ریسپانسیو 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
4 (80%) 1 vote
درباره نویسنده :
پشتیبانی وب یار

مطالب مرتبط

طراحی فروشگاه اینترنتی تجارت پویا

سایت فروشگاهی تجارت پویا

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

طراحی فروشگاه اینترنتی جین ایران

فروشگاه اینترنتی جین ایران

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

طراحی سایت فرهنگی سایت کودک

طراحی سایت فرهنگی کودک خلاق

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

طراحی سایت بازرگانی ایراکو

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

ارسال دیدگاه

  1. زهرا گفت:

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

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

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

  2. اسما گفت:

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

  3. اسما گفت:

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

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

    سلام
    ممنون

*    

*