ساخت نوار منو هالفتون

ساخت نوار منو هالفتون

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

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

در قدم اول ما شروع به نوشتن ساختار کلی منو ها با استفاده از HTML می کنیم.تمام منو ها در داخل یک لیست نامرتبی از UL قرار دارد که به شما کمک میکند تا به راحتی منو خود را سازماندهی کنید.در داخل هر عنصر LI یک لینک(hyperlink) قرار دارد که بعدا توسط کدهای css به آنها شکل یک دکمه را خواهیم داد.

demo.html


شما اگر قصد استفاده از این نوار منو را داشته باشید باید در href به جای #،آدرس مربوطه را قرار دهید.

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

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

i3

styles.css

.menuUL li{
    /* This will arrange the LI-s next to each other */
    display:inline;
}

.menuUL li a,.menuUL li a:visited{
    /* Styling the hyperlinks of the menu as buttons */

    float:left;
    font-weight:bold;
    background:url(img/button_bg.jpg) repeat-x center bottom #666666;

    /* display:block allows for additional CSS rules to take effect, such as paddings: */
    display:block;
    border:1px solid #4D4D4D;
    color:#CCCCCC;
    border-top-color:#565656;

    padding:4px 6px;
    margin:4px 5px;
    height:16px;

    /* Setting a CSS3 box shadow around the button */

    -moz-box-shadow:0 0 1px black;
    -webkit-box-shadow:0 0 1px black;
    box-shadow:0 0 1px black;

    /* CSS3 text shadow */
    text-shadow:0 1px black;
}

.menuUL li a:hover{
    /* On hover show the top, lighter, part of the background: */
    background-position:center top;
    text-decoration:none;
}
#navigation{
    /* The navigation menu bar: */
    background:#222222;
    border:1px solid #111111;
    float:left;
    padding:5px 10px;
}

#navigation,.menuUL li a{
    /* CSS3 rounded corners for both the navigation bar and the buttons: */
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -khtml-border-radius:4px;
    border-radius:4px;
}

#stage{
    /* The stage contains the individual divs that comprise the halftone icon: */
    height:300px;
    position:absolute;
    right:50px;
    top:20px;
    width:400px;
}

.dot{
    /* The stage contains 192 .dot divs: */
    float:left;
    height:25px;
    width:25px;
}

.dot.active{
    /* When assigned the active class, the div shows a background image of a dot: */
    background:url(img/dot.png) no-repeat center center;
}

.clear{
    /* Old-school clear fix hack to clear the floats: */
    clear:both;
}

#main{
    margin:0 auto;
    position:relative;
    width:900px;
}

ما در کدهای بالا نحوه  چیدمان منو ها،سایه متون و حاشیه (border) و غیره را تنظیم کردیم که به دلیل سادگی نیازی به توضیح ندارند.

خوب پس از نوشتن استایل ها به سراغ کدهای  جاوااسکریپت می رویم.در ابتدا کتابخانه جی کوئری را به بالای کدهای خود وارد می کنیم.

همانطور که میدانید دو روش برای نمایش نوار منو وجود دارد: روش اول نمایش پیشفرض است که  یک انیمیشن ساده هنگام قرار گیری موس روی آیکون نمایش می دهد و روش دوم به شما این امکان را می دهد تا یک شکل دلخواه با کلیک روی جدول ایجاد کنید.شما بعدا میتوانید از اشکال ایجادی یک خروجی تهیه کرده و آنها را در داخل آبجکت  اجسام(shape object) قرار دهید.

برای اینکه جی کوئری از این اجسام بتواند استفاده کند کافی است که نام شکل ایجادی را به کلاس مربوطه وارد نمایید.

script.js

/* Set serviceMode to true to create your own shapes: */
var serviceMode=false;

$(document).ready(function(){

    /* This code is executed after the DOM has been completely loaded */

    var str=[];
    var perRow = 16;

    /* Generating the dot divs: */
    for(var i=0;i<192;i++)
    {
        str.push('
'); } /* Joining the array into a string and adding it to the inner html of the stage div: */ $('#stage').html(str.join('')); /* Using the hover method: */ $('#navigation li a').hover(function(e){ /* serviceDraw is a cut-out version of the draw function, used for editing and composing shapes: */ if(serviceMode) serviceDraw($(this).attr('class')); else draw($(this).attr('class')); }, function(e){}); /* Caching the dot divs into a variable for performance: */ dots = $('.dot'); if(serviceMode) { /* If we are in service mode, show borders around the dot divs, add the export link, and listen for clicks: */ dots.css({ border:'1px solid black', width:dots.eq(0).width()-2, height:dots.eq(0).height()-2, cursor:'pointer' }); $('
').css({ position:'absolute', bottom:-20, right:0 }).html('[Export Shape]').appendTo('#stage'); dots.click(function(){ $(this).toggleClass('active'); }); } }); var shapes={ /* Each shape is described by an array of points. You can add your own shapes here, just don't forget to add a coma after each array, except for the last one */ house:[22,37,38,39, .... 166,167,168,169], wrench:[22,23,24,25,26 .... 148,163], envelope:[34,35,36,37, .... 153,154,155,156], info:[22,23,38,39, .... 151,166,167,168] } var stopCounter = 0; var dots; function draw(shape) { /* This function draws a shape from the shapes object */ stopCounter++; var currentCounter = stopCounter; dots.removeClass('active').css('opacity',0); $.each(shapes[shape],function(i,j){ setTimeout(function(){ /* If a different shape animaton has been started during the showing of the current one, exit the function */ if(currentCounter!=stopCounter) return false; dots.eq(j).addClass('active').fadeTo('slow',0.4); /* The fade animation is scheduled for 10*i millisecond into the future: */ },۱۰*i); }); } function serviceDraw(shape) { /* A cut out version of the draw function, used in service mode */ dots.removeClass('active'); $.each(shapes[shape],function(i,j){ dots.eq(j).addClass('active'); }); } function outputString() { /* Exports the positions of the active dot divs as a comma-separated string: */ var str=[]; $('.dot.active').each(function(){ str.push(this.id.replace('d-','')); }) prompt('Insert this string as an array in the shapes object',str.join(',')); }

در بالا ترین بخش کد متغییر serviceMode است.با قرار دادن تنظیمات آن بصورت true()شما میتوانید اشکال خود را به آن اضافه کنید.پس از اتمام بارگذاری DOM ما یک جدول با ۱۹۲ تگ ایجاد می کنیم که برای نمایش اشکال از آن استفاده خواهیم کرد.
سپس شما میتوانید آبجکت shapes رو مشاهده کنید.ما بصورت پیشفرض ۴ تا شکل ایجاد کردیم و نام کلاس را به آنها لینک کردیم.سپس ما توابع drawو serviceDraw و outputString را تعریف کردیم.دو مورد آخر فقط برای رسم شکل مورد استفاده service mode قرار می گیرد.

i21

پایان

+4
0


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

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

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

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

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

*


شش − = 2

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>