افزونه ای برای منو بازشونده

luckyjamy · شهریور 94

سلام

دوستان یک سوال دارم.

در بعضی سایتها کنار حاشیه تصویر یک نوار باریک است که با نزدیک شدن موس به آن باز شده و شماره تلفن یا یکسری اطلاعات دیگر را نمایش می دهد.

نام این افزونه یا اینگونه افزونه ها چیست؟

ممنون

علی زینلی · مهر 94

سلام ، اینکار بسیار ساده و نیازی به نصب افزونه ای نیست ، شما کافیه فقط یک tag وردپرس داشته باشید که داخلش یه tag دیگه باشه که موقع hover روی tag مادر (والد) tag دوم که hidden شده یا display:none شده ظاهر بشه.

من دو نمونه براتون نوشتم با 2 روش متفاوت تستشون کنید:

روش اوّل:
<body>
<div class="luckyjamy">In Neveshte Zaher MishavadHover Me</div>
</body>
<style>
body{height:900px;}
.luckyjamy {
position:fixed;
left:-175;
top:150;
background:green;
border:dashed #d3d3d3;
transition:0.5s;
}
.luckyjamy:hover {left:0px;}
</style>
</body>
روش دوم:
<body>
<div class="luckyjamy"><span>In Neveshte Zaher Mishavad</span><b>Hover Me</b></div>
</body>
<style>
body{height:900px;}
.luckyjamy {
position:fixed;
left:0;
top:150;
background:green;
border:dashed #d3d3d3;
transition:0.5s;
}
.luckyjamy b{border-left:dashed #d3d3d3 2px;margin:10px;padding-left:2px;}
.luckyjamy span{display:none;}
.luckyjamy:hover span{display:inline;}
</style>
</body>

دو نمونه هم براتون میذارم از سایت های دیگه که منو رو اینجوری درست کردن:

http://codepen.io/JFarrow/pen/fFrpg

http://jsfiddle.net/CHe4S/

البتّه یادتون باشه که دیگه اینکه از این کد ها چجوری استفاده میکنین بستگی به سلیقه و خلاقیّت خودتون داره ، ساختار کلّیش همونی هست که بالا عرض کردم (روی والد hover میکنی و تگ فرزندش نمایش داده میشه)

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

اگر نمونه خاصی مدّ نظرتون هست بگید تا بیشتر راهنمایی کنم.

برای ازمایش کد هایی که دادم میتونید از لینک زیر استفاده کنید (هر روش رو به صورت جداگانه وارد کنید تا نام class ها با هم تداخل پیدا نکنن)

http://onlinehtmltools.com/live-html-editor/editor.html

ورود

افزونه ای برای منو بازشونده

پست های پیشنهاد شده

luckyjamy 2

لینک به ارسال

علی زینلی 2114

لینک به ارسال

به گفتگو بپیوندید

فهرست بخش ها

فعالیت ها