طراحی یک منوی resizable

0
137
منوی resizable
منوی resizable
Want create site? Find Free WordPress Themes and plugins.

طراحی یک منوی resizable

طراحی وب سایت در اصفهان:

طراحی سایت,طراحی یک منوی 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: 960px; margin: 0 auto;} 

 

section.stretch{ float: left; height: 1500px; width: 100%; }
section.stretch p{ font-family: 'Amaranth', sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; }
section.stretch p.bottom{ top: 100%; } 

 

header{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; }
header a{ color: #969696; text-decoration: none; font-family: 'Amaranth', sans-serif; text-transform: uppercase; font-size: 1em; }
header a.active, header a:hover{ color: #3d3d3d; }
header li{ margin-right: 30px; }

/* Sizes for the bigger menu */
header.large{ height: 120px; }
header.large img{ width: 489px; height: 113px; }
header.large li{ margin-top: 45px; }

</style>
</head>

 

/* Sizes for the smaller menu */
header.small{ height: 50px; }
header.small img{ width: 287px; height: 69px; margin-top: -10px; }
header.small li{ margin-top: 17px; }

 

<script type="text/javascript">
$(document).on("scroll",function(){
    if($(document).scrollTop()>100){
        $("header").removeClass("large").addClass("small");
    } else{
        $("header").removeClass("small").addClass("large");
    }
});
</script>

 

header,nav, a, img, li{
  transition: all 1s;
  -moz-transition: all 1s; /* Firefox 4 */
  -webkit-transition: all 1s; /* Safari and Chrome */
  -o-transition: all 1s; /* Opera */
}

 

هم اکنون آن را در وب سایت خود پیاده سازی نمایید

طراحی سایت,هم اکنون که شما مشاهده نمودید که چقدر آسان میشود این تکنیک را طراحی و پیاده سازی نمود, حتما در اولین فرصت این کدها را برای پروژه وب سایت خود هم داشته باشید. شما حتی میتوانید به سلیقه ی خود بسیاری از کدها را به سلیقه خود تغییر دهید, مانند رنگ متن ها و تصاویر پس زمینه و یا حتی جایگاه منو در داخل صفحه وب سایت. حتی میتوانید افکت های مختلف transition را هم در کار خود لحاظ نمایید. این نوع از منوها اگر تغییرات زیادی هم بکند بسیار زیبا و جذاب خواهد شد.به یاد داشته باشیم که منو و لوگو مهمترین جلوه های تاثیر گذار در ذهن کاربر خواهد بود و طراحی بد آنها و یا داشتن موقعیت بد بسیار میتواند در وب سایت و ذهن بینندگان وب سایت شما تاثیر منفی بگذارد.

 طراحی یک منوی resizable

منبع:گلد وب

Did you find apk for android? You can find new Free Android Games and apps.

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

نمای کلی بررسی
حجم مطلب
کیفیت مطلب
کیفیت آموزشی مطلب
کیفیت نگارش
نویسندهposhesh.com
منبعطراحی سایت در اصفهان توسط طراحی سایت پوشش
اشتراک
مقاله قبلیگام هایی برای ایجاد یک تجربه ی دیجیتال زیبا
مقاله بعدیسرعت سایت خود را با یک CDN افزایش دهید
طراحی سایت پوشش همواره تلاش کرده است تا با بکار گیری جدیدترین و بروز ترین متد های طراحی وب سایت روز دنیا, دست به طراحی انواع پورتال یا وب سایت دولتی,سایت شرکتی,سایت فروشگاهی,سایت خبری,سایت مذهبی,سایت ورزشی,سایت دانلود و بازی,سایت شخصی و حتی طراحی سایت رایگان نماید تا تحولی جدید در دنیای طراحی وبسایت بوجود آورد به گونه ای که دیگر در طراحی های وب سایت پوشش, سایت های معمولی و سه ستونه و دو ستونه و پر زرق و برق قدیمی که حوصله ی هر کاربری را به سر می برد جای خود را به سایت هایی با گرافیک و کیفیت و از همه مهمتر سئوی بالا می دهند و هر کاربری را مجذوب خود کرده و اینگونه است که راندمان کار یک وب سایت بالا رفته و طراحی سایت مورد نظر به هدف خود که رضایت و بازدید بیشتر کاربران است, می رسد.

بدون نظر