Statistiken

Benutzer
2
Beiträge
18
Anzahl Beitragshäufigkeit
37554

Wer ist online

Aktuell sind 26 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.

Mit affix kann zum Beispiel die Navbar am oberen oder unteren Browserfenster angeheftet werden. Es kann auch die Sidebar (aside) von x bis y fixiert sein. Hier im Beispiel fixieren wir die 2te Navbar sobald sie an den oberen Rand des Browserfensters stößt.

Beispiel dafür einfach die Seite scrollen und auf die 2te Navbar achten.

HTML

<div class="navWrapper">
<div id="nav1" class="navbar">

<div class="navbar-inner">

<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="/joom3bootstrap/<?php echo $this->baseurl; ?>"><?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>
</div>

CSS

Damit die Navbar in der Tablet/Mobile Ansicht Scrollbar bleibt, muss MediaQueries (hier bis 960px Breite) noch einen Eintrag bekommen, da sonst bei Menüstrukturen die über das Display hinaus gehen, keine Navigation möglich ist.

 #nav1.affix {
top: 0;
right: 0;
left: 0;
z-index: 1000;
margin-bottom:0;
}

.navWrapper {
margin-bottom: 20px;
}

@media (max-width: 960px) {

#nav1.affix {
position: relative !important;
}

}

Javascript

Das Javascript kommt unten vor dem body in die index.php

<script type="text/javascript">
(function($){

        $(document).ready(function(){
            
            var navDiv = '#nav1';
            
            $('.navWrapper').css('min-height', $(navDiv).height());
                        
            $(navDiv).affix({
                offset: $(navDiv).position()
            });
        
        });


})(jQuery);
</script>

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