تابلو اعلانات

distoper

Demo

کد CSS خام:

کد:
<style>

#sse1

{

/*You can decorate the menu's container, such as adding background images through this block*/

background-color: #222;

height: 38px;

padding: 15px;

border-radius: 3px;

box-sizing: content-box;

}

#sses1

{

margin:0 auto;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/

}

#sses1 ul

{

position: relative;

list-style-type: none;

float:left;

padding:0;margin:0;

border-bottom:solid 1px #6C0000;

}

#sses1 li

{

float:left;

list-style-type: none;

padding:0;margin:0;background-image:none;

}

/*CSS for background bubble*/

#sses1 li.highlight

{

background-color:#800;

top:36px;

height:2px;

border-bottom:solid 1px #C00;

z-index: 1;

position: absolute;

overflow:hidden;

}

#sses1 li a

{

box-sizing: content-box;

height:30px;

padding-top: 8px;

margin: 0 20px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/

color: #fff;

font: normal 12px arial;

text-align: center;

text-decoration: none;

float: left;

display: block;

position: relative;

z-index: 2;

}

</style>

کد JavaScript خام:

کد:

<script>

var sse1 = function () {

var rebound = 20; //set it to 0 if rebound effect is not prefered

var slip, k;

return {

buildMenu: function () {

var m = document.getElementById('sses1');

if(!m) return;

var ul = m.getElementsByTagName("ul")[0];

m.style.width = ul.offsetWidth+1+"px";

var items = m.getElementsByTagName("li");

var a = m.getElementsByTagName("a");

slip = document.createElement("li");

slip.className = "highlight";

ul.appendChild(slip);

var url = document.location.href.toLowerCase();

k = -1;

var nLength = -1;

for (var i = 0; i < a.length; i++) {

if (url.indexOf(a.href.toLowerCase()) != -1 && a.href.length > nLength) {

k = i;

nLength = a.href.length;

}

}

if (k == -1 && /:\/\/(?:www\.)?[^.\/]+?\.[^.\/]+\/?$/.test) {

for (var i = 0; i < a.length; i++) {

if (a.getAttribute("maptopuredomain") == "true") {

k = i;

break;

}

}

if (k == -1 && a[0].getAttribute("maptopuredomain") != "false")

k = 0;

}

if (k > -1) {

slip.style.width = items[k].offsetWidth + "px";

//slip.style.left = items[k].offsetLeft + "px";

sse1.move(items[k]); //comment out this line and uncomment the line above to disable initial animation

}

else {

slip.style.visibility = "hidden";

}

for (var i = 0; i < items.length - 1; i++) {

items.on-mouseover = function () {

if (k == -1) slip.style.visibility = "visible";

if (this.offsetLeft != slip.offsetLeft) {

sse1.move(this);

}

}

}

m.on-mouseover = function () {

if (slip.t2)

slip.t2 = clearTimeout(slip.t2);

};

m.on-mouseout = function () {

if (k > -1 && items[k].offsetLeft != slip.offsetLeft) {

slip.t2 = setTimeout(function () { sse1.move(items[k]); }, 50);

}

if (k == -1) slip.t2 = setTimeout(function () { slip.style.visibility = "hidden"; }, 50);

};

},

move: function (target) {

clearInterval(slip.timer);

var direction = (slip.offsetLeft < target.offsetLeft) ? 1 : -1;

slip.timer = setInterval(function () { sse1.mv(target, direction); }, 15);

},

mv: function (target, direction) {

if (direction == 1) {

if (slip.offsetLeft - rebound < target.offsetLeft)

this.changePosition(target, 1);

else {

clearInterval(slip.timer);

slip.timer = setInterval(function () {

sse1.recoil(target, 1);

}, 15);

}

}

else {

if (slip.offsetLeft + rebound > target.offsetLeft)

this.changePosition(target, -1);

else {

clearInterval(slip.timer);

slip.timer = setInterval(function () {

sse1.recoil(target, -1);

}, 15);

}

}

this.changeWidth(target);

},

recoil: function (target, direction) {

if (direction == -1) {

if (slip.offsetLeft > target.offsetLeft) {

slip.style.left = target.offsetLeft + "px";

clearInterval(slip.timer);

}

else slip.style.left = slip.offsetLeft + 2 + "px";

}

else {

if (slip.offsetLeft < target.offsetLeft) {

slip.style.left = target.offsetLeft + "px";

clearInterval(slip.timer);

}

else slip.style.left = slip.offsetLeft - 2 + "px";

}

},

changePosition: function (target, direction) {

if (direction == 1) {

//following +1 will fix the IE8 bug of x+1=x, we force it to x+2

slip.style.left = slip.offsetLeft + Math.ceil(Math.abs(target.offsetLeft - slip.offsetLeft + rebound) / 10) + 1 + "px";

}

else {

//following -1 will fix the Opera bug of x-1=x, we force it to x-2

slip.style.left = slip.offsetLeft - Math.ceil(Math.abs(slip.offsetLeft - target.offsetLeft + rebound) / 10) - 1 + "px";

}

},

changeWidth: function (target) {

if (slip.offsetWidth != target.offsetWidth) {

var diff = slip.offsetWidth - target.offsetWidth;

if (Math.abs(diff) < 4) slip.style.width = target.offsetWidth + "px";

else slip.style.width = slip.offsetWidth - Math.round(diff / 3) + "px";

}

}

};

} ();

if (window.addEventListener) {

window.addEventListener("load", sse1.buildMenu, false);

}

else if (window.attachEvent) {

window.attachEvent("onload", sse1.buildMenu);

}

else {

window["onload"] = sse1.buildMenu;

}

</script>

کد اصلی در (Body) قرار داده شود:
کد:
<div id="sse1"> <div id="sses1"> <ul> <li><a href="http://farscloob.ir/">Javascript Menus</a></li> <li><a href="http://farscloob.ir/">Horizontal Menus</a></li> <li><a href="http://farscloob.ir/">Web Menus</a></li> </ul> </div> </div>

امیدوارم خوشتون اومده باشه.... یاعلی

mhadides

فرقش با منوهای دیگه در چیه که با جاوااسکریپته؟؟من که تغییری احسای نمیکنم!کار خاصی انجام میده؟؟

98love

آفرین. خوبه

دامین سایتتم برا شبکه اجتماعی عالیه..

koolak91

قشنگه ولی میتونی بهش استایل هم بدی که موس رفت روش تغییر حالت بده تا زیباتر هم بشه
پیروز باشید./
یاعلی

20-abzar

نقل قول از mhadides
فرقش با منوهای دیگه در چیه که با جاوااسکریپته؟؟من که تغییری احسای نمیکنم!کار خاصی انجام میده؟؟

تنها تغییرش اینه ک با جاوا اسکریپته

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

//
استایل هم بهش بده تا یکمی گرافیکی تر و جذاب تر بشه
با تشکر

saranaz

بازرگانی معینی در نظر دارد به مناسبت فرارسیدن عید نوروز تخفیف عیدانه از 5 درصد تا 30 درصد در محصولات ذیل به مشتریان عزیز اهدا نماید.
فروش ویژه تجهیزات آشپزخانه شامل یراق آلات (بلوم)-اکسسوری- هود -فر- اجاق گاز- ماکروفر- ماکروویو-کشو گرم کن – بخارپز – سینک استیل – سینک گرانیتی – تجهیزات ریلی کابینت آشپزخانه وکشو سوپری... از برند های بلوم اتریش – ملونی – هایگلد- روبرتو – زیگما – بوش- آریستون – تکنو – اسنوا – استیل البرز
شماره های تماس: 09133127025 – 03136641103- 03136641104- 03136629450- 03136629447 و شماره
شماره و کانال تلگرام 09130195520 t.me/bazarganimoeinie-
سایت: https://digimoeini.com/
اینستاگرام: bazarganimoeinie
آدرس:اصفهان خیابان فیض جنب بانک صادرات بازرگانی معینی

فروش ویژه 5تا30 درصد تخفیف عیدانه

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

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

https://digimoeini.com/

تابلو اعلانات
	قوانین جدید - تالار گفتمان سایت ساز رزبلاگ درخواست تغيير نام کاربري اطلاع رساني از مشکل قالب هاي داخل پنل اطلاع رساني از مشکل امکانات سايت ها پيشنهادات خود را براي امکانات سايت ها و رزآپ اينجا بيان کنيد! پيشنهادات خود را براي امکانات انجمن ها اينجا بيان کنيد! آموزش جامع بهينه سازي سايت براي موتورهاي جستجوگر طراحي بنر ، لوگو ، هدر و ... ( با هزينه ) درخواست ويرايش قالب فقط در اين تاپيک ! تاپیک جامع اخطار ها و کاربران اخراج شده دلیل

تعداد بازدید 590 منو جالب در طراحی سایت با کد JavaScript
نویسنده	پیام