ساخت منو وب سایت سازگار با موبایل توسط css ساخت منو وب سایت سازگار با موبایل توسط css

رتبه این آیتم
ساخت منو وب سایت سازگار با موبایل توسط css
رتبه 4 در 5 رای از 1 تا 5

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

هدف

هدف این مقاله چگونگی تبدیل یک لیست منو به منو آبشاری می باشد که به فضای بسیار کنتری برای نمایش نیازمند است.

شما می توانید تمامی منوهای خود را در یک کلید قرار دهید و بدین وسیله در فضای صفحه خود صرفه جویی نمایید.

Nav HTML Markup

در بخش کد html منو توضیح داده خواهد شد. تگ <nav> برای ایجاد منو آبشاری مورد نیاز می باشد. این را در ادامه مقاله توضیح خواهم داد. کلاس current منوی فعلی که در آن هستیم را نمایش می دهد.

 <nav class="nav">
<ul>
<li class="current"><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>

CSS

کد ایجاد منوی آبشاری بسیار ساده می باشد بنابراین توضیح خاصی برای آن ندارم. فقط دقت نمایید از display:inline-block به جای float:left در تگ <li> استفاده شده. بنابراین با text-align به UL می توانید منوهای خود را راست چین، چپ چین و یا وسط چین نمایید.

/* nav */
.nav { position: relative; margin: 20px 0; }
.nav ul { margin: 0; padding: 0; }
.nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; }
.nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; }
.nav a:hover { color: #000; }
.nav .current a { background: #999; color: #fff; border-radius: 5px; }

وسط چین و یا راست چین

به طوری که در بخش قبل توضیح داده می شود می توانید جهت منوهای خود را عوض نمایید:

/* right nav */
.nav.right ul { text-align: right; }
/* center nav */
.nav.center ul { text-align: center; }

پشتیبانی از اینترنت اکسپلورر

تگ html5 که در این کد استفاده شده یعنی <nav> در اینترنت اکسپلورر نسخه 8 با پایین پشتیبانی نمی شود. برای پشتیبانی css3-mediaqueries.js (یا respond.js) و html5shim.js استفاده نمایید. در صورتی که نمی خواهید از این کتابخانه ها استفاده نماید می توانید <nav> را با <div> جایگزین نمایید.

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Responsive

هم اکنون که می بایست این منوی ایجاد شده را با استفاده از media query سازگار با نسخه موبایل نمایید. در رزولوشن کمتر از 600px از تگ nav استفاده شده بنابراین می توان تگ <ul> را به بالای صفحه انتقال داد. تمامی <li> توسط display:none مخفی شده اند. اما .current به صورت بلاک نمایش داده می شود. اما در هاور nav کلیه <li> ها به حالت display:block خواهد بود. آیکون به .current اضافه شده تا منوی فعال مشخص گردد.  

@media screen and (max-width: 600px)
{ .nav { position: relative; min-height: 40px; }
.nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.nav li { display: none; /* hide all <li> items */ margin: 0; }
.nav .current { display: block;
/* show only current <li> item */
}
.nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; }
.nav .current a { background: none; color: #666; }
/* on nav hover */
.nav ul:hover { background-image: none; }
.nav ul:hover li { display: block; margin: 0 0 5px; }
.nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; }
/* right nav */
.nav.right ul { left: auto; right: 0; }
/* center nav */
.nav.center ul { left: 50%; margin-left: -90px; } }

 

 

17-ارديبهشت-1393

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

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

به اشتراک گذاری مطلب در

به اشتراک گذاری در فیس بوک به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین

2 نظر

  • ادوردز جمعه, 10 آذر 1396 14:30 پست شده توسط ادوردز

    عالی بود

  • پوریا زارعی یکشنبه, 16 شهریور 1393 11:46 پست شده توسط پوریا زارعی

    ممنون کامل تر از همه جا!!!

يک نظر بدهيد

موارد ستاره دار الزامی هستند

طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد.
دارای مجوز از (سازمان نظام صنفی رایانه ای استان تهران) ، (رتبه 4 شورای عالی انفورماتیک کشور) ، (وزارت فرهنگ و ارشاد اسلامی)
آموزشگاه طراحی سایت و سئو با مجوز رسمی از سازمان فنی و حرفه ای کشور افتتاح شد
دارکوب به عنوان شرکت خلاق توسط معاونت علمی و فناوری ریاست جمهوری برگزیده شد