Statistiken

Benutzer
2
Beiträge
18
Anzahl Beitragshäufigkeit
36352

Wer ist online

Aktuell sind 24 Gäste und keine Mitglieder online

Eigene Inhalte Logo

Eigene Inhalte Info

Diese Web-Präsentation ist zu Testzwecken mit Joomla! 3.x, Bootstrap 2 und eigenem JavaScript installiert. Sie soll aufzeigen was mit Joomla! 3.x und Bootstrap 2 möglich ist, evtl. Fehler aufzeigen, und helfen dafür Lösungen zu finden. Es ist eine reine Demoseite und dient ausschließlich zur Veranschaulichung.

Dropdown Hover Navbar

Main-Menü - Navbar dropdown mit Javascript für eine hover Funktion. Weitere Navbar ist möglich durch data-target Definition.

HTML

<div class="navbar">
    <div class="navbar-inner nav1">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".navC1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="http://w3developer.de"><?php echo $app->getCfg('sitename'); ?></a>
        <div class="nav-collapse collapse navC1">
            <jdoc:include type="modules" name="main-menu" style="none" />
            
            <ul class="nav pull-right">
                <li class="divider-vertical"></li>
                <li class="pull-right"><jdoc:include type="modules" name="search" style="xhtml" /></li>
            </ul>
        </div>
    </div>
</div>

CSS

.caret {
    margin-left: 4px !important;
}
.caretRight {
    margin-left: 8px !important;
    margin-top: 6px !important;
    border-left-color: #555555 !important;
    border-right-color: transparent !important;
    border-bottom: 4px solid transparent !important;
    border-top: 4px solid transparent !important;
}
a:hover .caretRight,
a:focus .caretRight {
    border-left-color: #333333 !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-top-color: transparent !important;
}

Javascript

(function($){

    // Bootstrap Menu-Class festlegen
    $(document).ready(function(){
        // dropdown
        $('.nav1 .nav .parent').addClass('dropdown');
        $('.nav1 .nav .parent > a').addClass('dropdown-toggle');
        $('.nav1 .nav .parent > a').attr('data-toggle','dropdown');
        $('.nav1 .nav .parent > a').append('<span class="caret caretDown"></span>'); // .caretDown Klasse festlegen
        $('.nav1 .nav .parent > ul').addClass('dropdown-menu');
        // Festlegen der ul Klassen .level1 / .level2 / .level3
        $('.nav1 ul.nav').addClass('level1');
        $('.nav1 .nav .parent ul.nav-child').addClass('level2').removeClass('level1');
        $('.nav1 .nav .parent > ul.nav-child ul').addClass('level3').removeClass('level2');
        // Festlegen der caret Klassen .caretDown / .caretRight
        $('.nav1 .nav .parent > ul.nav-child span.caret').addClass('caretRight').removeClass('caretDown');
    });
    
    // Funktion zur Ausfuehrung des Hovereffektes
    function menuEffect(nav1_sublevel_ul){
        if (!nav1_sublevel_ul.length) return;
            $(nav1_sublevel_ul).find('ul').css({"display" : "none", "visibility" : "visible", "top" : "100%"});
            $(nav1_sublevel_ul).find('ul ul').css({"display" : "none", "left" : "100%" , "top" : "0"});
            $(".nav1 ul.menu li").hover(function(){
                $(this).find('ul.dropdown-menu').first().stop(true, true).delay(200).fadeIn(500);
            },function(){
                $(this).find('ul.dropdown-menu').first().stop(true, true).delay(200).fadeOut(500);
            });
    };
    
    $(document).ready(function(){
        menuEffect($(".nav1 ul.menu li"));
    });

})(jQuery);

Kommentare   

0 #3 RSD 2014-04-22 07:23
hej Ronny,
das eine setzt die class, das andere das attribut für das dropdown a. die sind normalerweise wichtig, aber wenn es so geht dann ist ja alles gut...
viel spaß damit..
eine lösung wie ich meinte mit button-group kannst du dir bei der avira seite sehr schön anschauen. bedenke es gibt .hidden-phone, .visible-phone, etc. für button auf...

LG RSD
Dem Administrator melden
0 #2 Ronny 2014-04-21 10:37
Hi, ich habe 2 Zeilen aus dem JS entfernt:

$('.nav1 .nav .parent > a').addClass('d ropdown-toggle' );
$('.nav1 .nav .parent > a').attr('data-toggle','dropdown');

Nun geht es. Wofür waren diese gedacht? Grüße und noch nen tollen Ostermontag!
Dem Administrator melden
0 #1 Ronny 2014-04-19 10:05
Ich nutze die 2er Version von Bootstrap. Hab nun nochmal das Modul neu angepasst. Beim obersten Naviagationspun kt wird nun der link angezeigt, Jedoch beim Klick darauf geschieht nichts.

Werde das mit der Mobile Version auch komolett offen machen. Ist erstmal die einfachste Lösung.
Dem Administrator melden

Kommentar schreiben

Bitte habt dafür Verständnis, dass erst nach Sichtung der Einträge eure Einträge freigestellt werden, und auch erst dann sichtbar für alle sind.


Sicherheitscode
Aktualisieren