جمعه , ۲۹ اردیبهشت ۱۳۹۶
جدیدترین مطالب

آموزش ساخت منوی زیبا در جی کویری

46 بازدید    ارسال دیدگاه

سلام دوباره

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

چگونه باجی کویری منو بسازیم

تصور من از شما اینه که حداقل تا حدی  با دستورات Css,html,jquery آشنایی دارین.در غیر اینصورت در جلسات بعدی آموزش پایه این سه تا براتون می زارم.

ایتدا یه ویرایشگر برای خودتون باز کنید.می تونید از  notepad,sublime,dreamweaverیا …. کنین.دوستان حتما می دونید که ما می تونیم هر سه نوع کد را یا باهم تو یک فایل بنویسیم یا اینکه برای هر کدام از کدهای css,html,jquery یه فایل جدا بسازیم و بعد با دستورات فراخوانی انها را به فایل اصلی مون وصل کنیم.

من  به ترتیب کد ها رو براتون قرار می دم اگر موقع استفاده با مشکل برخوردین از پایین صفحه (بخش نظرات) مطرح کنین تا باهم حلش کنیم.

اگر می خواین در یک فایل باشن به این شکل عمل می کنیم:

کد html: این کد ها را بین تگ <body > در فایل html قراردهید.

<ul class=”myMenu”>
<li><a href=”#”> menu 1</a></li>
<li><a href=”#”> menu 2</a>
<ul>
<li><a href=”#”>sub menu 1</a></li>
<li><a href=”#”>sub menu 2</a></li>
<li><a href=”#”>sub menu 3</a></li>
<li><a href=”#”>sub menu 4</a></li>
</ul>
</li>
<li><a href=”#”> menu 3</a>
<ul>
<li><a href=”#”>sub menu 1</a></li>
<li><a href=”#”>sub menu 2</a></li>
<li><a href=”#”>sub menu 3</a></li>
<li><a href=”#”>sub menu 4</a></li>
</ul>
</li>
<li><a href=”#”> menu 4</a></li>
<li><a href=”#”> menu 5</a></li>

</ul>

کد Css : کد های زیر را بین تگ <head> در فایل html قرار دهید

<style type=”text/css”>
.myMenu {
margin:0;
padding:0;
}

.myMenu li {
list-style:none;
float:left;
font:12px Arial, Helvetica, sans-serif #111;
}

.myMenu li a:link, .myMenu li a:visited {
display:block;
text-decoration:none;
background-color:#a8091e;
padding: 0.5em 2em;
margin:0;
border-right: 1px solid #fff;
color:#fff;
}

.myMenu li a:hover {
background-color:#C2717C;
}

/*style the sub menu*/
.myMenu li ul {
position:absolute;
visibility:hidden;
border-top:1px solid #fff;
margin:0;
padding:0;
}

.myMenu li ul li {
display:inline;
float:none;
}

.myMenu li ul li a:link, .myMenu li ul li a:visited {
background-color:#C2717C;
width:auto;
}

.myMenu li ul li a:hover {
background-color:#a8091e;
}

</style>

.رو هم به انتهای کد ها مون قبل از تگ بادی اضافه می کنیم   jquery ودر پایان کدهای

<script type=”text/javascript”>
$(document).ready(function() {
$(‘.myMenu > li’).bind(‘mouseover’, openSubMenu);
$(‘.myMenu > li’).bind(‘mouseout’, closeSubMenu);

function openSubMenu() {
$(this).find(‘ul’).css(‘visibility’, ‘visible’);
};

function closeSubMenu() {
$(this).find(‘ul’).css(‘visibility’, ‘hidden’);
};

});
</script>

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

. از این  لینک  می تونین کتابخونه جی کویری رو دانلود کنین

 و با دستور زیر به فایل اصلی لینک بدین

(بنویسین src توجه کنین فایل کتابخونه رو کنار فایل اصلی ذخیره کنین یا اینکه ادرس کاملش رو در قسمت )

<head>

<script src=”jquery-2.1.1.js”></script>

</head>

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

دانلود فایل تمرین

 

جوابی بنویسید

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

*

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>