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]
<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?