Witaj szanowny Gościu na forum Odjechani.com.pl. Serdecznie zachęcamy do rejestracji. Tylko u nas tak przyjazna atmosfera. Kliknij tutaj, aby się zarejestrować i dołączyć do grona Odjechanych!

Strona odjechani.com.pl może przechowywać Twoje dane osobowe, które w niej zamieścisz po zarejestrowaniu konta. Odjechani.com.pl wykorzystuje również pliki cookies (ciasteczka), odwiedzając ją wyrażasz zgodę na ich wykorzystanie oraz rejestrując konto wyrażasz zgodę na przetwarzanie swoich danych osobowych w ramach funkcjonowania serwisu. Więcej informacji znajdziesz w naszej polityce prywatności. Pozdrawiamy!


Menu JS . Dodatkowa opcja
#1
Witajcie. Dorwałem super menu na stronę i chciałbym je umieścić ale nie pasuje mi jedna rzecz. Mianowicie chciałbym aby po najechaniu np na 3 wysunęło się w dół np A. Bardzo bym prosił o pomoc. W zamian zaoferuję 5-6GB free na megahamster :)

Poniżej zamieszczę kody.

Link do menu : http://bit.ly/152VjL9



Mam na myśli takie coś , 3 i 8 najechane myszką :

[1][2][_3_][4][5][6][7][_8_]
       [A]              [C]
       [B]              [D]

W miejscu w którym ma się pojawić :

<div id="ds1">
<div id="sses1">
<ul> 
<li><a href="1">1</a></li>
<li><a href="2">2</a></li>
<li><a href="3">3</a></li>
<li><a href="1">1</a></li>
<li><a href="2">2</a></li>
<li><a href="3">3</a></li>
<li><a href="4">4</a></li>
<li><a href="5">5</a></li>
<li><a href="6">6</a></li>
<li><a href="7">7</a></li>
<li><a href="8">8</a></li>
</ul>
</div>
</div>

Kod CSS :


#ds1
{
    
    background-image:url('bg_menu.png');
    height: 38px;
    padding: 15px;
    border-radius: 10px;
}
#sses1
{
    margin:0 auto;
}
#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;
}

#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
{
    height:30px;
    padding-top: 8px;
    margin: 0 14px;
    color: #fff;
    font: normal 12px arial;
    text-align: center;
    text-decoration: none;
    float: left;
    display: block;
    position: relative;
    z-index: 2;
}

Kod JS :

var sse1 = function () {
    var rebound = 20; 
    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[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";
                
                sse1.move(items[k]); 
            }
            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) {
                        sse1.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 () { 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) {
                
                slip.style.left = slip.offsetLeft + Math.ceil(Math.abs(target.offsetLeft - slip.offsetLeft + rebound) / 10) + 1 + "px";
            }
            else {
                
                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;
}
  Odpowiedz
#2
Wystarczy poszukać w google i masz odpowiedź, poczytaj kurs JS i dowiesz się wszystkiego.
Dokładnie poczytaj o zdarzeniach w JS i w 5 minut sam sobie poprawisz to co chcesz.
  Odpowiedz
#3
niedziala link :(
  Odpowiedz


Podobne wątki
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  jak zrobić menu? vatras 6 1 996 01.04.2015, 18:40
Ostatni post: Dennijs

Skocz do:


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