آموزش طراحی منوی resizable
توسط حمیدرضا عباسی
امروزه در بسیاری از وب سایت ها قابلیت بسیار جالب و منحصر به فردی وجود دارد و آن این است که منوی این وب سایت ها همراه با تغییر سایز صفحه نمایش نیز تغییر پیدا مینماید و به صورت انیمیشنی در می آید. کوچک و خلاصه نمودن Navigation صفحه وب سایت میتواند باعث شود تا شما اطلاعات بیشتری را در اختیار کاربران وب سایت قرار دهید.
در این مقاله از سلسله مقاله های طراحی وب سایت که در گروه طراحی سایت وب شهر برای شما تهیه شده است, قصد داریم تا چنین منویی را به با کدهای HTML5 و CSS3 و اندکی کد jQuery درسته شده است را به شما آموزش دهیم.
این نوع از منوها بیشتر زمانی بسیار مفید و سودنمند خواهد بود که شما بخواهید بر روی اطلاعات خاصی تمرکر نمایید و آن را بیشتر به کاربر خود نشان دهید, و در چنین شرایطی شما میتوانید زمانی که کاربر برای بار اول در حال مشاهده وبسایت شما میباشد تاثیر شگفت انگیزی بر روی آن بگذارید. در این حالت شما میتوانید لوگو و نشان تجاری خود را بهتر به کاربر وب سایت نشان دهید و زمانی که کاربر مشغول به دیدن بخشهای دیگر صفحه وب سایت شد, شما میتوانید همچنان اطلاعات را در فرمت کمتر به کاربرن نشان دهید.
چندین راه برای پیاده سازی آن وجود دارد. در این آموزش به شما خواهیم گفت که چگونه میتوانید یک navigation سرتاسری و fixed و ثابت طراحی نمایید. در این حالت حتی اگر شما نیاز داشته باشید میتوانید لوگوی خود را با حالت دیگر و کوچک شده به کار نشان دهید.
کدهای مورد نیاز برای طراحی منو
<!DOCTYPE HTML>
<html>
<head> <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>How to create a dynamic top bar | Webdesigner Depot</title>
</head>
<body> </body>
</html>
*******************************
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<meta name=“author” content=“Antonio Pratas”>
<title>How to create a resizing menu bar | Webdesigner Depot</title>
<link rel=“stylesheet” type=“text/css” href=“http://meyerweb.com/eric/tools/css/reset/reset.css”>
<script src=“http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<header class=“large”>
<nav>
<img class=“logo” src=“wdd.png”/>
<ul>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>Posts</a></li>
<li><a href=“#”>Awesome Freebies</a></li>
</ul>
</nav>
</header>
<section>
<p>Let’s get that menu small!</p>
<p>End of the line.</p>
</section>
</body>
</html>
***************************************
<style type=”text/css“>
/* Importing Amaranth Font for menu text */
@import url(http://fonts.googleapis.com/css?family=Amaranth);
/* Basic layout */
body{ background-color: #ebebeb; } ul{ float: right; } li{ display: inline; float: left;} img.logo{float: left;}
/* Size and center the menu */
nav{ width: ۹۶۰px; margin: ۰ auto;}
******************************************
section.stretch{ float: left; height: ۱۵۰۰px; width: ۱۰۰%; }
section.stretch p{ font-family: ‘Amaranth’, sans-serif; font-size: ۳۰px; color: #۹۶۹۶۹۶; text-align: center; position: relative; margin-top: ۲۵۰px; }
section.stretch p.bottom{ top: ۱۰۰%; }
******************************************
header{ background: #C7C7C7; border-bottom: ۱px solid #aaaaaa; float: left; width: ۱۰۰%; position: fixed; z-index: ۱۰; }
header a{ color: #۹۶۹۶۹۶; text-decoration: none; font-family: ‘Amaranth’, sans-serif; text-transform: uppercase; font-size: ۱em; }
header a.active, header a:hover{ color: #۳d3d3d; } header li{ margin-right: ۳۰px; }
/* Sizes for the bigger menu */
header.large{ height: ۱۲۰px; }
header.large img{ width: ۴۸۹px; height: ۱۱۳px; }
header.large li{ margin-top: ۴۵px; }
</style>
</head>
********************************************
* Sizes for the smaller menu */
header.small{ height: ۵۰px; }
header.small img{ width: ۲۸۷px; height: ۶۹px; margin-top: –۱۰px; }
header.small li{ margin-top: ۱۷px; }
***********************************
<script type=“text/javascript”>
$(document).on(“scroll”,function(){
if($(document).scrollTop()>۱۰۰){ $(“header”).removeClass(“large”).addClass(“small”); }
else{ $(“header”).removeClass(“small”).addClass(“large”); } });
</script>
***********************************************
header,nav, a, img, li{
transition: all ۱s;
-moz-transition: all ۱s; /* Firefox 4 */
-webkit-transition: all ۱s; /* Safari and Chrome */
-o-transition: all ۱s; /* Opera */ }
***********************************************
هم اکنون آن را در وب سایت خود پیاده سازی نمایید
هم اکنون که شما مشاهده نمودید که چقدر آسان میشود این تکنیک را طراحی و پیاده سازی نمود, حتما در اولین فرصت این کدها را برای پروژه وب سایت خود هم داشته باشید. شما حتی میتوانید بسیاری از کدها را به نفع و سلیقه خود تغییر دهید, مانند رنگ متن ها و تصاویر پس زمینه و یا حتی جایگاه منو در داخل صفحه وب سایت. حتی میتوانید افکت های مختلف transition را هم در کار خود لحاظ نمایید.
این نوع از منوها اگر تغییرات زیادی هم بکند بسیار زیبا و جذاب خواهد شد.به یاد داشته باشیم که منو و لوگو مهمترین عناصر تاثیر گذار در ذهن کاربر خواهد بود و طراحی بد آنها و یا داشتن موقعیت بد بسیار میتواند در وب سایت و ذهن کاربران وب سایت شما تاثیر منفی بگذارد.
*** تا می توانید به ظاهر وب سایت خود اهمیت دهید، ظاهر وب سایت هرچه شکیل تر و بهتر باشد مخاطب بیشتر جذب میشود.
حمیدرضا عباسی
حمیدرضا عباسی هستم، کارشناس نرم افزار و دانشجوی کارشناسی ارشد تجارت الکترونیک، طراح و توسعه دهنده وب سایت و متخخص سئو، از سال ۹۰ به صورت حرفه ای شروع به فعالیت در زمینه طراحی وب سایت کردم و بسیار علاقه مند و مشتاق به استفاده از تکنولوژی های جدید و بروز در زمینه طراحی وب سایت و تجارت الکترونیک هستم.
