آموزش طراحی Menu سایت با HTML5 و CSS

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

2 آموزش طراحی Menu سایت با HTML5 و CSS

با یکی دیگر از آموزشهای سایت آسارایان با عنوان "آموزش طراحی Menu سایت با HTML5 و CSS" در خدمت شما هستم .تمام وب سایتهای اینترنتی دارای Menu می باشند و منو اصلی ترین بخش یک قالب وب سایت به شمار می آید که اگر بدرستی تنظیمات و رنگ آن انتخاب نشود ، دسترسی به قسمت های مختلف سایت تقریبا امکان پذیر نمی باشد .  در این مقاله آموزشی با استفاده از Html5 و Css یک منوی افقی برای شما طراحی می کنم و آموزش آن را همراه با کد و تصاویری که در ادامه آماده کرده ام قرار میدهم. برای درک بهتر می توانید ابتدا دمو را مشاهده کرده و فایل اصلی را در پایان آموزش دانلود کنید . سعی کنید ابتدا یک بار آموزش را دقیق بخوانید سپس دمو را مشاهده و اگر به نتیجه نرسیدید از فایل اصلی استفاده کنید . سطح این آموزش متوسط ، پیشرفته می باشد و تگها به صورت کامل توضیح داده نمی شود . کاربرانی که می خواهند کاربرد تگ های CSS را بدانند باید به بخش مقدماتی سایت مراجعه کنند .

 دموی آموزش

1. نرم افزار دریم ویور یا نوت پد را باز کنید و تگهای تشکیل دهنده صفحه  HTML را همانند تصویر زیر داخل آن کپی کنید .  اگر کار با نرم افزار نوت پد را دوست ندارید از ویرایشگر NotePad++ استفاده کنید .
حتما با تگهای ابتدایی HTML  آشنایی دارید . تگ هایی که وقتی در کنار هم قرار می گیرند یک صفحه ساده وب سایت را میسازند . همانطورکه میدانید برای تغییرات شکل ظاهری قالب که مربوط به رنگ پس زمینه و فونتها ، نوع فونت و نحه قرار گیری آن در چیدمان صفحه از دستورات Css استفاده می شود .


برای تغییرات ظاهری منو هم باید یک فایل Styles.css ایجاد کرده و تگ آن را در بین تگ head همانند کدهای زیر قرار بدهیم . برای ایجاد فایل Styles.css کافیست ویرایشگر دریم ویور یا نوت پد را باز کرده و بدون وارد کردن هیچ کدی فایل را با نام Styles.css ذخیره کنید . 
عنوان وب سایت یا قالب که در مرورگر نمایش داده می شود بین تگ title قرار میگیرد .

 

<!doctype html>
<html >
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' href='/styles.css' type='text/css' />
<title>آموزش طراحی Menu سایت با HTML5 و CSS</title>
</head>
<body>
</body>
</html>

 

بالا صفحه یک عنوان برای این منو قرارا میدهم . بین تگ Body  دو تگ H1  و H2 ایجاد میکنم و متنی که در بین این دو تگ باید قرار بگیرد را تایپ میکنم . در بین تگ H1 عنوان و در بین تگ H2  لینک به بخش آموزش . شما می توانید تمام بخش ها را به صورت فارسی تایپ کنید .

 

<header>
<h1>CSS3 Animated Navigation Menu- AsaRayan.Com</h1>
<h2><a href="http://learning.asarayan.com">&laquo; Read and download on Tutorialzine</a></h2>
</header>

 

کد کلی به این شکل می باشد .

 

<!doctype html>
<html >
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' href='/styles.css' type='text/css' />
<title>آموزش طراحی Menu سایت با HTML5 و CSS</title>
</head>
<body>
<header>
              <h1>CSS3 Animated Navigation Menu- AsaRayan.Com</h1>
              <h2><a href="http://learning.asarayan.com">&laquo; Read and download on Tutorialzine</a></h2>
</header>
</body>
</html>

  

نوبت میرسه به ایجاد منوها . همانطور که در بخش مقدماتی یاد گرفته اید برای ایجاد منو از تگ Ul به همراه li  استفاده می شود . من میخواهم برای منوی خانه یک آیکون قرار بدهم به همین دلیل از کلاس homeIcon استفاده کرده ام .

 

        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="http://asarayan.com" class="homeIcon">Home</a></li>
                <li id="news"><a href="http://asarayan.com">News</a></li>
                <li id="about"><a href="http://asarayan.com">About us</a></li>
                <li id="services"><a href="http://asarayan.com">Services</a></li>
                <li id="contact"><a href="http://asarayan.com">Contact us</a></li>
            </ul>
        </nav>

 

 و اما آخرین قسمت مربوط به صفحه html حق کپی رایت می باشد که با تگ footer مشخص شده است .

 

<footer>Copyright 2013 AsaRayan.Com All Right Reserved <b>Read and download on Tutorialzine <a href="http://learning.asarayan.com">AsaRayan.com</a></b></footer>

  

کد کلی صفحه Html را برای شما قرار میدهم تا بعد از آن به سراغ دستورات Css برویم  . 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />        
        <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>        
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="/assets/css/styles.css" />       
    </head>    
    <body>
        <header>
            <h1>CSS3 Animated Navigation Menu- AsaRayan.Com</h1>
            <h2><a href="http://learning.asarayan.com">&laquo; Read and download on Tutorialzine</a></h2>
        </header>        
        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="http://asarayan.com" class="homeIcon">Home</a></li>
                <li id="news"><a href="http://asarayan.com">News</a></li>
                <li id="about"><a href="http://asarayan.com">About us</a></li>
                <li id="services"><a href="http://asarayan.com">Services</a></li>
                <li id="contact"><a href="http://asarayan.com">Contact us</a></li>
            </ul>
        </nav>        
        <footer>Copyright 2013 AsaRayan.Com All Right Reserved <b>Read and download on Tutorialzine <a href="http://learning.asarayan.com">AsaRayan.com</a></b></footer>            
    </body>
</html>

 

در این مرحله باید کدها را با عنوان index.html ذخیره کنید . صفحه شما باید همانند تصویر زیر در مرورگر نمایش داده شود .

1 آموزش طراحی Menu سایت با HTML5 و CSS

 

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

تصاویر بکار برده شده در این قسمت هم از انتهای آموزش دانلود کنید و در پوشه تصاویر خودتون قرار بدهید . 

 

*{
    margin:0;
    padding:0;
}
html{
    background:url('../img/bg_tile.jpg') #333d43;
    
}
body{
    background:url('../img/bg_head.jpg') repeat-x top center, url('../img/bg_vert.jpg') repeat-x;
    min-height:500px;
    font:14px/1.3 tahoma;
    color:#888;
    padding:10px;
}
/*----------------------------
    CSS3 Animated Navigation
-----------------------------*/
.fancyNav{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;
}
.fancyNav li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    border-right: 1px solid rgba(9, 9, 9, 0.125);
    /* Adding a 1px inset highlight for a more polished efect: */
    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    position:relative;
    float: left;
    list-style: none;
}
.fancyNav li:after{
    /* This creates a pseudo element inslide each LI */    
    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;
    /* Gradients! */
    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    /* This will create a smooth transition for the opacity property */
    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}
/* Treating the first LI and li:after elements separately */
.fancyNav li:first-child{
    border-radius: 4px 0 0 4px;
}
.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    border-radius:4px 0 0 4px;
}
.fancyNav li:last-child{
    border-radius: 0 4px 4px 0;
}
/* Treating the last LI and li:after elements separately */
.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    border-radius:0 4px 4px 0;
}
.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
    /* This property triggers the CSS3 transition */
    opacity:1;
}
.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}
.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
    opacity:1 !important;
}
/* Styling the anchor elements */
.fancyNav li a{
    color: #5d5d5d;
    display: inline-block;
    font: 18px/1 tahoma;
    padding: 12px 35px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}
.fancyNav a.homeIcon{
    background:url('../img/home.png') no-repeat center center;
    display: block;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    text-indent: -9999px;
    width: 16px;
}
/*-------------------------
    Demo Page Styles
--------------------------*/
h1,h2{
    color: #fff;
    line-height: 1;
    background-color: #222;
    font-family: 'Segoe UI Light','Segoe UI',Arial,sans-serif;
    font-weight: normal;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    margin-left: -446px;
}
h1{
    font-size: 36px;
    padding: 5px 15px 10px;
    top: 0;
}
h2{
    font-size: 14px;
    padding: 4px 13px 9px 11px;
    top: 51px;
}
header{
    display:block;
    margin-top:50px;
    position:relative;
}
nav{
    display: block;
    margin: 300px auto 0;
    text-align: center;
    width: 600px;
}
footer{
    color: #BBBBBB;
    font-size: 15px;
    line-height: 1.6;
    padding: 60px 20px 0;
    text-align: center;
    display:block;
}
footer b{
    color: #888888;
    display: block;
    font-size: 10px;
    font-weight: normal;
}
a, a:visited {
    text-decoration:none;
    outline:none;
    color:#54a6de;
}
a:hover{
    text-decoration:underline;
}

  

دانلود فایل تمریندموی آموزش

آخرین بروز رسانیچهارشنبه, 18 شهریور 1394 10:03

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #2 سعید صبح خیز 1395-04-07 10:05
به نقل از sam:
سلام
حالا بعد از ساختن Styles.css چطور میشه با index.html مچ کرد تا عین نمونه کار شما بالا بیاد؟؟؟؟؟

سلام
باید Styles.css را بین تگ head لینک کنید . در تصویر شماره 1 مشخص هست
نقل قول کردن
0 #1 sam 1395-04-06 17:02
سلام
حالا بعد از ساختن Styles.css چطور میشه با index.html مچ کرد تا عین نمونه کار شما بالا بیاد؟؟؟؟؟
نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا