Tani hosting

lava lamp jquery menu?
mordrag Offline
Użytkownik

Liczba postów: 31
Reputacja: 0
Post: #1
lava lamp jquery menu? 06-04-2015 11:29
cześć
jak zrobić lava lamp jquery menu tak obrazkowo w css?
Cytuj
Diabeł Online
Użyszkodnik


Liczba postów: 777
Reputacja: 666
KasztaN9 Offline
TenTego Premium

Liczba postów: 136
Reputacja: 9
Post: #2
RE: lava lamp jquery menu? 06-04-2015 12:06
http://lavalamp.magicmediamuse.com/examples.php
Cytuj
mordrag Offline
Użytkownik

Liczba postów: 31
Reputacja: 0
Post: #3
RE: lava lamp jquery menu? 06-04-2015 12:29
To mi niedziała, bardziej o coś takiego chodziło mi:

[Obrazek: 8733eb5de6.png]
Cytuj
klocek Offline
Administrator

Liczba postów: 3,052
Reputacja: 316
Post: #4
RE: lava lamp jquery menu? 06-04-2015 14:23
Łapaj: http://codepen.io/iamvdo/pen/GsIxk
WWW Cytuj
mordrag Offline
Użytkownik

Liczba postów: 31
Reputacja: 0
Post: #5
RE: lava lamp jquery menu? 06-04-2015 15:16
zrobiłem na samej javie script :
wystarczy skopiować i wkleic...

Kod:
<html>
<head>
    <title>menu wjs</title>
<style>
#box1
{
    background-color: lightgreen;
    height: 30px;
    padding: 10px;
    border-radius: 8px;
    box-sizing: content-box;
}
#box2
{
    margin:0 auto;
}
#box2 ul
{
    position: relative;
    list-style-type: none;
    float:left;
    padding:0;margin:0;
}
#box2 li
{
    float:left;
    list-style-type: none;
    padding:0;margin:0;background-image:none;
}
#box2 li.highlight
{
    background: url(http://fotozrzut.pl/zdjecia/9b89436c98.png); background-repeat:no-repeat; width:90px; height:90px;
    background-size: 90px 90px;
    top:-50px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    z-index:1;
    position: relative;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";/*For IE 8*/
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000'); /*For IE 5.5 - 7*/
}
#box2 li a
{
    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: white;
    font: normal 12px arial;
    text-align: center;
    text-decoration: none;
    float: left;
    display: block;
    position: relative;
    z-index: 2;
}
    
</style>
</head>

<body>
<script>
var box1 = function () {
    var rebound = 20; //set it to 0 if rebound effect is not prefered
    var slip, k;
    return {
        buildMenu: function () {
            var m = document.getElementById('box2');
            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[i].href.toLowerCase()) != -1 && a[i].href.length > nLength) {
                    k = i;
                    nLength = a[i].href.length;
                }
            }

            if (k == -1 && /:\/\/(?:www\.)?[^.\/]+?\.[^.\/]+\/?$/.test) {
                for (var i = 0; i < a.length; i++) {
                    if (a[i].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";
                box1.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[i].onmouseover = function () {
                    if (k == -1) slip.style.visibility = "visible";
                    if (this.offsetLeft != slip.offsetLeft) {
                        box1.move(this);
                    }
                }
            }

            m.onmouseover = function () {
                if (slip.t2)
                    slip.t2 = clearTimeout(slip.t2);
            };

            m.onmouseout = function () {
                if (k > -1 && items[k].offsetLeft != slip.offsetLeft) {
                    slip.t2 = setTimeout(function () { box1.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 () { box1.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 () {
                        box1.recoil(target, 1);
                    }, 15);
                }
            }
            else {
                if (slip.offsetLeft + rebound > target.offsetLeft)
                    this.changePosition(target, -1);
                else {
                    clearInterval(slip.timer);
                    slip.timer = setInterval(function () {
                        box1.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", box1.buildMenu, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", box1.buildMenu);
}
else {
    window["onload"] = box1.buildMenu;
}
</script>
<div id="box1">
  <div id="box2">
    <ul>
      <li><a href="">strona1</a></li>
      <li><a href="">strona2</a></li>
      <li><a href="">strona3</a></li>
      <li><a href="">strona4</a></li>
      <li><a href="">strona5</a></li>
      <li><a href="">strona6</a></li>
    </ul>
  </div>
</div>
</body>
</html>
(Ten post był ostatnio modyfikowany: 06-04-2015 18:59 przez mordrag.)
Cytuj


Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości