jQuery Magic Line

html.de-Forum JavaScript
1

Hallo liebe Community,
ich habe ein kleines Problem und zwar habe ich nach verschiedenen Möglichkeiten gesucht einen sogenannte Magic Line zu erzeugen und bin von CSS-Tricks auf das folgende Tutorial gestoßen http://css-tricks.com/jquery-magicline-navigation/ . Nun wird diese „Linie“ angezeigt und verändert sich auch in der Breite auf die größe des Elementes wodrüber der Mauszeiger ist. Allerdings bewegt Sie sich nur nach links, nicht nach rechts. Ich verwende Bootstrap und habe folgende Navigationsstruktur:

[HTML]



Toggle navigation





      <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
        <ul id="navi" class="nav navbar-nav">
          <li class="current_page_item"><a href="" onfocus="this.blur()">Startseite</a></li>
          <li><a href="ueber-uns/" onfocus="this.blur()">Über Uns</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dienstleistungen <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#" onfocus="this.blur()">Webdesign</a></li>
              <li><a href="#" onfocus="this.blur()">Web Sicherheit</a></li>
              <li><a href="#" onfocus="this.blur()">Suchmaschinenoptimierung</a></li>
              <li><a href="#" onfocus="this.blur()">Content Management Systems</a></li>
              <li><a href="#" onfocus="this.blur()">Social Media Marketing</a></li>
              <li><a href="#" onfocus="this.blur()">Mobiles Internet</a></li>
            </ul>
          </li>
          <li><a href="referenzen/" onfocus="this.blur()">Referenzen</a></li>
          <li><a href="kontakt/" onfocus="this.blur()">Kontakt</a></li>
        </ul>
        <ul class="pull-right nav-social-items">
            <li><a href="#" onfocus="this.blur()" title=""><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" onfocus="this.blur()" title=""><i class="fa fa-google-plus"></i></a></li>
            <li><a href="" onfocus="this.blur()" title=""><i class="fa fa-xing"></i></a></li>
            <li><a href="#" onfocus="this.blur()" title=""><i class="fa fa-twitter"></i></a></li>   
        </ul>
      </div>
    </nav>[/HTML]

CSS-Auschnitt
[HTML]#magic-line {
position: absolute;
bottom: 0px;
left: 0;
width: 100px;
height: 3px;
background: #0099CC;
}

ul#navi > li > a {
font-family: ‚Roboto‘, ‚sans-serif‘;
font-size: 1.1em;
font-weight: 400;
color: #323232;
}

ul#navi li:hover, ul#navi li:active, ul#navi li:link {
background: #FFFFFF !important;
}

ul#navi li a:hover {
color: #0099CC;
}

ul#navi li.dropdown a {
background: #FFFFFF !important;
}

ul#navi ul.dropdown-menu {
border: 0 !important;
box-shadow: none !important;
border-radius: 0;
}

ul#navi ul.dropdown-menu > li > a {
color: #323232;
font-family: ‚Roboto‘, ‚sans-serif‘;
font-size: 1.1em;
font-weight: 400;
background: #FFFFFF;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}

ul#navi ul.dropdown-menu > li > a:hover {
color: #0099CC;
}[/HTML]

MagicLine.js

[CODE]$(function() {

var $el, leftPos, newWidth,
    $mainNav = $("#navi");

$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());
   
$("#navi li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });   
});

});[/CODE]

Kann mir jedem helfen oder einen Hint geben?

2

Hilft es dir so etwas weiter?

http://jsfiddle.net/RxJ6h/

Eine Stylesheet ist nur eingebunden siehst du links unter „External Resources“.

3

Naja selbst wenn ich den JavaScript Code update funktioniert es nicht. Ich finde meinen Fehler nicht.

4

Wie gesagt die Linie verändert sich in der Breite und bewegt sich auch nach links, jenoch ist dort kein Navigationselement mehr sondern mein Logo und Sie stoppt somit links am Bildschirm rand. Den Ausschnitt den du mir gepostet hast, ist ja das Tutorial von CSS-Tricks doch funktioniert es nicht.

5

Warum stellst du die Seite nicht online? Und wirf bei der Gelegenheit auch gleich das Inline-JavaScript raus.

6

Weiß ich ehrlich gesagt nicht. Werde ich am Mittwoch machen, wenn sich bis dahin das Problem nicht geloest hat. Da ich bis Mitteoch leider unterwegs bin wie grade und nicht dazu komme. Meinst du es liegt am Inline-Javascript?

7

Nicht zwangsläufig, aber ich würde den Code trotzdem aufräumen. Außerdem bringt auch Bootstrap noch ein eigenes Script für die Navigation mit.

8

Also am Inline-JavaScript sollte es nicht liegen, habe grad ein bisschen rumprobiert und daran liegt es definitiv nicht. Wahrscheinlich dann eher unter dem Script was Bootstrap für die Navigation mitbringt.

9

Also ich habe Inline mal alles rausgeschmissen und auch den restlichen JavaScript Code auskommentiert, außer Bootstrap und jQuery. Trotzdem funktioniert es nicht, also ist das Problemfeld wahrscheinlich Bootstrap. Müsste ich jetzt also den kompletten Code vom Bootstrap durchforsten und die Stelle für die Navigation ausfindig machen?

10

Die verlinkte bootstrap.js rauszuwerfen würde wahrscheinlich reichen.

Aber warum baust du das MagicLine Menü nicht einfach mal ohne Bootstrap?

11

Habs grade gemacht, jedoch hat sich nichts geändert. s: Das hab ich schon gemacht und es hat auch alles funktioniert, ich finde einfach meinen Fehler nicht.

12

Neu gebaut klappts http://jsfiddle.net/nKnuG/ . Trotzdem mit Bootstrap wie folgt nicht. Wenn ich aber die Klasse „nav“ von Bootstrap rauschmeiße funktioniert es zwar, zerschießt mir aber die Navi bzw. Sie ist nicht mehr responsive und nichts mehr ist an Ort und Stelle.

EDIT:
Problem gelöst. Code wie folgt abgeändert.

[CODE]$(function() {

var $el, leftPos, newWidth;

$("#navi").append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());
   
$("#navi").find("li").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $(this).width();
   
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });   
});

}); [/CODE]