ساخت منوی بالای صفحه واکنشگرا با HTML و CSS

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

در اینمقالهاز سلسله مقاله هایطراحی وب سایتکه در شرکت اطلس وب برای شما تهیه شده است,قصد داریم تا چنین منویی را به با کدهایHTML5وCSS3و اندکی کدjQueryدرسته شده است را به شما آموزش دهیم.

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

چندین راه برای پیاده سازی آن وجود دارد. در این آموزش به شما خواهیم گفت که چگونه میتوانید یکnavigationسرتاسری وfixedو ثابت طراحی نمایید. در این حالت حتی اگر شما نیاز داشته باشید میتوانید لوگوی خود را با حالت دیگر و کوچک شده به کار نشان دهید.

شما میتوانید با کلیک بر رویهمین لینکتمامی کدهای این آموزش را دانلود نمایید.

کدهای مورد نیاز برای طراحی منو

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>How to create a dynamic top bar | Webdesigner Depottitle>
  head><body>
body>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 Depottitle>
    <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=ldquo;largerdquo;>
    <nav><img class=ldquo;logordquo; src="wdd.png"/>
    <ul>
      <li><a href="#">Homea>li>
      <li><a href="#">Postsa>li>
      <li><a href="#">Awesome Freebiesa>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; }

 تاريخ: سه
 شنبه
 28 شهريور
 1396 ساعت: 15:34