آموزش ساخت نوار منو-۲

آموزش ساخت نوار منو-۲

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

برای مشاهده لینک وارد شود

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

demo.html

<ul id="navigationMenu">
    <li>
        <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>

    <li>
    	<a class="about" href="#">
            <span>About</span>
        </a>
    </li>

    <li>
         <a class="services" href="#">
            <span>Services</span>
         </a>
    </li>

    <li>
    	<a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>

    <li>
    	<a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>

ما در کنار هر li یک لینک و تگ spanداریم.هر لینک شامل یک کلاس همنام خودش است که برای تعیین استایل و تصویر زمینه از آن استفاده می کنیم.

i12

 

CSS

وقتی ما اساس کلی منو ها را تعیین کردیم میتونیم به سراغ ایجاد استایل ها و افکت های مورد نیاز برویم.البته در نظر داشته باشید که این کدها روی مرورگر هایی که از CSS3 پشتیبانی می کنند کار می کنند.

styles.css – Part 1

*{
    /* A universal CSS reset */
    margin:0;
    padding:0;
}

body{
    font-size:14px;
    color:#666;
    background:#111 no-repeat;

    /* CSS3 Radial Gradients */
    background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner
​          , #۴۴۴ ۱۵۰px, #111 300px);
    background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

    font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

برای پس رمینه body ما ابتدا رنگ پس زمینه را مشخص کردیم و سپس دو  CSS3 radial gradients  به عکس پس زمینهاضافه کردیم.درصورتی که مرورگر از CSS3 پشتیبانی نکند رنگ پس زمینه نمایش داده خواهد شد.

styles.css – Part 2

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    /* The background sprite: */
    background:url('img/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

در کدهای بالا ما انیمیشن های مورد نیاز برای منو ها را تعیین کردیم.برای مثال هنگامی که کاربری روی یکی از آیکون ها برود ایونت hover: شروع به ایجاد افکت می کند بدون تعریف آن این اعمال به صورت آنی رخ می دهد.

i22

styles.css – Part 3

/* Green Button */

#navigationMenu .home {	background-position:0 0;}
#navigationMenu .home:hover {	background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

ودر آخر نیز ما ۵ طراحی مختلف برای منوها انجام دادیم که به دلیل سادگی نیازی به توضیح ندارند.

پایان

 

+2
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


چهار × 3 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>