نمایش یک منو با hover بر روی یک المنت

این تاپیک 4 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  مریم محمدی ،‏ 1 سال و 4 ماه پیش .

این تاپیک تاکنون 355 بازدید داشته است .

تگ شده :  

نویسنده پست
جمعه ، 31 جولای 2015     8:51 ب.ظ #


مریم محمدی

Subscriber
2 پست3 تاپیک

سلام

راستش دقیقا نمیدونستم چه عنوانی بنویسم :) ...فقط خواااهشا یکی کمکم کنه

ببینید من میخوام یه منو شبیه منوی سایت بامیلو ایجاد کنم www.bamilo.com

اون منوی چسبنده رو با منوی بزرگ پایینی رو هم درست کردم فقط میخوام مثل سایت بامیلو که وقتی با اسکرول میایم پایین و موس رو میبریم روی قسمت "خرید از مجموعه" دوباره اون منوی بزرگ رو نشون بده....نمیدونم چیکار باید بکنم...کد جی کوئریشم سعی کردم بنویسم ولی دقیق بلد نیستم:(

0  تشکر
شنبه ، 1 آگوست 2015     8:55 ب.ظ #


افشین زندی

Subscriber
101 پست8 تاپیک

سلام

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

0  تشکر
شنبه ، 1 آگوست 2015     9:18 ب.ظ #


اسماعیلی حسین

Subscriber
20 پست3 تاپیک

شاید این آموزش کمکت کنه:

حتما شما هم در سایت هایی دیده اید که وقتی اسکرول صفحه را پایین میکشید وقتی به منو میرسد ، ثابت می شود . در این آموزش یاد می گیرید که چطور با jQuery وقتی اسکرول را پایین میکشید منو سایتتان ثابت شود .

برای مثال ما همچین منویی داریم با کلس menu :

 

این منویی که ما در نظر گرفته ایم با همچین استایلیه که ۱۰۰px از بالا فاصله داره :

در سی اس اس وقتی می خواهیم چیزی را در صفحه ثابت کنیم از کد زیر استفاده میکنیم :

برای این منو یک کلس دیگه تعریف میکنیم که این منوی مارو ثابت نگه داره:

خوب ما برای این که با jQuery منو رو ثابت کنیم از این کد استفاده می کنیم :

پینمایش

 

0  تشکر
شنبه ، 1 آگوست 2015     9:20 ب.ظ #


اسماعیلی حسین

Subscriber
20 پست3 تاپیک

آموزش کامل

0  تشکر
شنبه ، 1 آگوست 2015     11:59 ب.ظ #


مریم محمدی

Subscriber
2 پست3 تاپیک

 

خیلی ممنون ازتون

خب من تونستم همه رو بنویسم فقط الان یه مکشلی

کد جی کوئری من برای نشون دادن منو در حالت hover فایده نداره چون تا موس رو میبرم روی منو، منو میره...

اینم کدم


$(document).ready(function () {
$(".menu ul li.part1").hover(
function () {
$('div.mainNav').fadeIn();
},
function () {
$('div.mainNav').fadeOut();
}
);

});

 

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

<div class="mainNav" style="float:right;width:14%; margin-left:100px; margin-top:0;position:fixed;z-index:5001;">

<ul class="menu" style="width:232px; margin-top:0; border-top:1px solid #000;">
<li class="part1" style="border-left:none; margin-top:0;">پیشنهاد روز ژنیک</li>
</ul>
<ul id="menu" class="approve" <%--class='nav_bar'--%> >

<li><a rel="nofollow" href="#" class="drop">مد و لباس</a><!-- Begin Home Item -->

<div class="dropdown_2columns"><!-- Begin 2 columns container -->

<div class="col_2">
<h2>Welcome !</h2>
</div>

<div class="col_2">
<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>
<p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>
</div>

<div class="col_2">
<h2>Cross Browser Support</h2>
</div>

<div class="col_1">
<img src="img/browsers.png" width="125" height="48" alt="" />
</div>

<div class="col_1">
<p>This mega menu has been tested in all major browsers.</p>
</div>

</div><!-- End 2 columns container -->

</li><!-- End Home Item -->

<li><a rel="nofollow" href="#" class="drop">بهداشتی، آرایشی و لوازم شخصی</a><!-- Begin 5 columns Item -->

<div class="dropdown_5columns"><!-- Begin 5 columns container -->

<div class="col_5">
<h2>This is an example of a large container with 5 columns</h2>
</div>

<div class="col_1">
<p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
</div>

<div class="col_1">
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
</div>

<div class="col_1">
<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
</div>

<div class="col_1">
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
</div>

<div class="col_1">
<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
</div>

<div class="col_5">
<h2>Here is some content with side images</h2>
</div>

<div class="col_3">

<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a rel="nofollow" href="#">Read more...</a></p>

<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a rel="nofollow" href="#">Read more...</a></p>

</div>

<div class="col_2">

<p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>

</div>

</div><!-- End 5 columns container -->

</li><!-- End 5 columns Item -->

<li><a rel="nofollow" href="#" class="drop">موبایل و تبلت</a><!-- Begin 4 columns Item -->

<div class="dropdown_4columns"><!-- Begin 4 columns container -->

<div class="col_4">
<h2>This is a heading title</h2>
</div>

<div class="col_1">

<h3>Some Links</h3>
<ul>
<li><a rel="nofollow" href="#">ThemeForest</a></li>
<li><a rel="nofollow" href="#">GraphicRiver</a></li>
<li><a rel="nofollow" href="#">ActiveDen</a></li>
<li><a rel="nofollow" href="#">VideoHive</a></li>
<li><a rel="nofollow" href="#">3DOcean</a></li>
</ul>

</div>

<div class="col_1">

<h3>Useful Links</h3>
<ul>
<li><a rel="nofollow" href="#">NetTuts</a></li>
<li><a rel="nofollow" href="#">VectorTuts</a></li>
<li><a rel="nofollow" href="#">PsdTuts</a></li>
<li><a rel="nofollow" href="#">PhotoTuts</a></li>
<li><a rel="nofollow" href="#">ActiveTuts</a></li>
</ul>

</div>

<div class="col_1">

<h3>Other Stuff</h3>
<ul>
<li><a rel="nofollow" href="#">FreelanceSwitch</a></li>
<li><a rel="nofollow" href="#">Creattica</a></li>
<li><a rel="nofollow" href="#">WorkAwesome</a></li>
<li><a rel="nofollow" href="#">Mac Apps</a></li>
<li><a rel="nofollow" href="#">Web Apps</a></li>
</ul>

</div>

<div class="col_1">

<h3>Misc</h3>
<ul>
<li><a rel="nofollow" href="#">Design</a></li>
<li><a rel="nofollow" href="#">Logo</a></li>
<li><a rel="nofollow" href="#">Flash</a></li>
<li><a rel="nofollow" href="#">Illustration</a></li>
<li><a rel="nofollow" href="#">More...</a></li>
</ul>

</div>

</div><!-- End 4 columns container -->

</li><!-- End 4 columns Item -->

<li ><a rel="nofollow" href="#" class="drop">صوتی، تصویری و دوربین</a>

<div class="dropdown_6columns ">

<div class="col_1">

<ul class="simple">
<li><a rel="nofollow" href="#">FreelanceSwitch</a></li>
<li><a rel="nofollow" href="#">Creattica</a></li>
<li><a rel="nofollow" href="#">WorkAwesome</a></li>
<li><a rel="nofollow" href="#">Mac Apps</a></li>
<li><a rel="nofollow" href="#">Web Apps</a></li>
<li><a rel="nofollow" href="#">NetTuts</a></li>
<li><a rel="nofollow" href="#">VectorTuts</a></li>
<li><a rel="nofollow" href="#">PsdTuts</a></li>
<li><a rel="nofollow" href="#">PhotoTuts</a></li>
<li><a rel="nofollow" href="#">ActiveTuts</a></li>
<li><a rel="nofollow" href="#">Design</a></li>
<li><a rel="nofollow" href="#">Logo</a></li>
<li><a rel="nofollow" href="#">Flash</a></li>
<li><a rel="nofollow" href="#">Illustration</a></li>
<li><a rel="nofollow" href="#">More...</a></li>
</ul>

</div>

</div>

</li>

<li><a rel="nofollow" href="#" class="drop">کامپیوتر و تجهیزات اداری</a><!-- Begin 3 columns Item -->

<div class="dropdown_7columns"><!-- Begin 3 columns container -->

<div class="col_3">
<h2>Lists in Boxes</h2>
</div>

<div class="col_1">

<ul class="greybox">
<li><a rel="nofollow" href="#">FreelanceSwitch</a></li>
<li><a rel="nofollow" href="#">Creattica</a></li>
<li><a rel="nofollow" href="#">WorkAwesome</a></li>
<li><a rel="nofollow" href="#">Mac Apps</a></li>
<li><a rel="nofollow" href="#">Web Apps</a></li>
</ul>

</div>

<div class="col_1">

<ul class="greybox">
<li><a rel="nofollow" href="#">ThemeForest</a></li>
<li><a rel="nofollow" href="#">GraphicRiver</a></li>
<li><a rel="nofollow" href="#">ActiveDen</a></li>
<li><a rel="nofollow" href="#">VideoHive</a></li>
<li><a rel="nofollow" href="#">3DOcean</a></li>
</ul>

</div>

<div class="col_1">

<ul class="greybox">
<li><a rel="nofollow" href="#">Design</a></li>
<li><a rel="nofollow" href="#">Logo</a></li>
<li><a rel="nofollow" href="#">Flash</a></li>
<li><a rel="nofollow" href="#">Illustration</a></li>
<li><a rel="nofollow" href="#">More...</a></li>
</ul>

</div>

<div class="col_3">
<h2>Here are some image examples</h2>
</div>

<div class="col_3">
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a rel="nofollow" href="#">Read more...</a></p>

<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a rel="nofollow" href="#">Read more...</a></p>
</div>

</div><!-- End 3 columns container -->

</li><!-- End 3 columns Item -->

<li ><a rel="nofollow" href="#" class="drop">لوازم جانبی الکترونیکی</a>

<div class="dropdown_1column">

<div class="col_1">

<ul class="simple">
<li><a rel="nofollow" href="#">FreelanceSwitch</a></li>
<li><a rel="nofollow" href="#">Creattica</a></li>
<li><a rel="nofollow" href="#">WorkAwesome</a></li>
<li><a rel="nofollow" href="#">Mac Apps</a></li>
<li><a rel="nofollow" href="#">Web Apps</a></li>
<li><a rel="nofollow" href="#">NetTuts</a></li>
<li><a rel="nofollow" href="#">VectorTuts</a></li>
<li><a rel="nofollow" href="#">PsdTuts</a></li>
<li><a rel="nofollow" href="#">PhotoTuts</a></li>
<li><a rel="nofollow" href="#">ActiveTuts</a></li>
<li><a rel="nofollow" href="#">Design</a></li>
<li><a rel="nofollow" href="#">Logo</a></li>
<li><a rel="nofollow" href="#">Flash</a></li>
<li><a rel="nofollow" href="#">Illustration</a></li>
<li><a rel="nofollow" href="#">More...</a></li>
</ul>

</div>

</div>

</li>

<li><a rel="nofollow" href="#" class="drop">لوازم خانگی برقی</a><!-- Begin 4 columns Item -->

<div class="dropdown_8columns"><!-- Begin 4 columns container -->

<div class="col_4">
<h2>This is a heading title</h2>
</div>

<div class="col_1">

<h3>Some Links</h3>
<ul>
<li><a rel="nofollow" href="#">ThemeForest</a></li>
<li><a rel="nofollow" href="#">GraphicRiver</a></li>
<li><a rel="nofollow" href="#">ActiveDen</a></li>
<li><a rel="nofollow" href="#">VideoHive</a></li>
<li><a rel="nofollow" href="#">3DOcean</a></li>
</ul>

</div>

<div class="col_1">

<h3>Useful Links</h3>
<ul>
<li><a rel="nofollow" href="#">NetTuts</a></li>
<li><a rel="nofollow" href="#">VectorTuts</a></li>
<li><a rel="nofollow" href="#">PsdTuts</a></li>
<li><a rel="nofollow" href="#">PhotoTuts</a></li>
<li><a rel="nofollow" href="#">ActiveTuts</a></li>
</ul>

</div>

<div class="col_1">

<h3>Other Stuff</h3>
<ul>
<li><a rel="nofollow" href="#">FreelanceSwitch</a></li>
<li><a rel="nofollow" href="#">Creattica</a></li>
<li><a rel="nofollow" href="#">WorkAwesome</a></li>
<li><a rel="nofollow" href="#">Mac Apps</a></li>
<li><a rel="nofollow" href="#">Web Apps</a></li>
</ul>

</div>

<div class="col_1">

<h3>Misc</h3>
<ul>
<li><a rel="nofollow" href="#">Design</a></li>
<li><a rel="nofollow" href="#">Logo</a></li>
<li><a rel="nofollow" href="#">Flash</a></li>
<li><a rel="nofollow" href="#">Illustration</a></li>
<li><a rel="nofollow" href="#">More...</a></li>
</ul>

</div>

</div><!-- End 4 columns container -->

</li><!-- End 4 columns Item -->

<li><a rel="nofollow" href="#" class="drop">سرگرمی، نوزاد و کودک</a><!-- Begin 5 columns Item -->

<div class="dropdown_9columns"><!-- Begin 5 columns container -->

<div class="col_5">
<h2>This is an example of a large container with 5 columns</h2>
</div>

<div class="col_1">
<p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
</div>

<div class="col_1">
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
</div>

<div class="col_1">
<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
</div>

<div class="col_1">
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
</div>

<div class="col_1">
<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
</div>

<div class="col_5">
<h2>Here is some content with side images</h2>
</div>

<div class="col_3">

<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a rel="nofollow" href="#">Read more...</a></p>

<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a rel="nofollow" href="#">Read more...</a></p>

</div>

<div class="col_2">

<p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>

</div>

</div><!-- End 5 columns container -->

</li><!-- End 5 columns Item -->
<li><a rel="nofollow" href="#" class="drop">خانه و سبک زندگی</a><!-- Begin 5 columns Item -->

<div class="dropdown_10columns"><!-- Begin 5 columns container -->

<div class="col_5">
<h2>This is an example of a large container with 5 columns</h2>
</div>

<div class="col_1">
<p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
</div>

<div class="col_1">
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
</div>

<div class="col_1">
<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
</div>

<div class="col_1">
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
</div>

<div class="col_1">
<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
</div>

<div class="col_5">
<h2>Here is some content with side images</h2>
</div>

<div class="col_3">

<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a rel="nofollow" href="#">Read more...</a></p>

<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a rel="nofollow" href="#">Read more...</a></p>

</div>

<div class="col_2">

<p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>

</div>

</div><!-- End 5 columns container -->

</li><!-- End 5 columns Item -->

<li><a rel="nofollow" href="#" class="drop">کتاب، محتوای دجیتال و لوازم تحریر</a><!-- Begin 5 columns Item -->

<div class="dropdown_11columns"><!-- Begin 5 columns container -->

<div class="col_5">
<h2>This is an example of a large container with 5 columns</h2>
</div>

<div class="col_1">
<p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
</div>

<div class="col_1">
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
</div>

<div class="col_1">
<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
</div>

<div class="col_1">
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
</div>

<div class="col_1">
<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
</div>

<div class="col_5">
<h2>Here is some content with side images</h2>
</div>

<div class="col_3">

<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a rel="nofollow" href="#">Read more...</a></p>

<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a rel="nofollow" href="#">Read more...</a></p>

</div>

<div class="col_2">

<p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>

</div>

</div><!-- End 5 columns container -->

</li><!-- End 5 columns Item -->
</ul>

</div>

به نظرتون کد جی کوئری رو چطوری بنویسم که منو نپره؟:)

0  تشکر
پست 1 تا 5 (از مجموع 5 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .