HowTo: OPW und jQuery Navigation
Hallo,
nachdem ich letztens eine Webseite gemacht habe, die ein OnePager sein sollte, habe ich leidvoll in Erfahrung bringen müssen, dass sich die Navigation, der Slider (heimrichhannot/contao-slick) und ein vertikales Akkordeon, welche ich verwendet habe, sich alle ein wenig in die Haare kriegen. Zwei setzen auf jQuery, eines auf die MooTools. Beide Bibliotheken einbinden sollte ja mittlerweile gehen, aber aus welchen Gründen auch immer - die drei konnten nicht miteinander.
Nachdem ich in keinster Weise ein Javascript-Guru bin, tu ich mir da etwas schwer, selber was zusammen zu pfistern. Daher habe ich mich an kleinste Übel gemacht: MooTools raus, jQuery rein. Anbei die Anleitung, die aber nicht zwingenderweise 1:1 umzusetzen wäre. A bisserl was ändern wird wohl schon noch jeder für sich machen müssen. :)
Zuallererst einmal die Auswahl des jQuery-Plugins für die Navigation. Davon gibt es wirklich Hunderte im Internet, aber es sollte auch etwas sein, was recht leicht zum Umsetzen geht. Ich habe nach einigen Versuchen (Trial & Error, of course) folgende Module notiert, die recht gut und einfach zu integrieren gehen:
- http://startbootstrap.com/template-o...scrolling-nav/
- http://www.bytemuse.com/scrollIt.js/
- https://css-tricks.com/snippets/jque...oth-scrolling/
- http://www.paulund.co.uk/smooth-scro...ks-with-jquery
- https://github.com/ChrisWojcik/single-page-nav
- http://projects.lukehaas.me/scrollify/
- http://www.outyear.co.uk/smint/
Letzter Eintrag ist übrigens ein Geheimtipp von meiner Seite, hatte nur noch keine Gelegenheit, es einzubauen.
Versucht habe ich die Plugins von [2] und [3], wobei ich dann bei Nr. 3 geblieben bin, weil es doch noch um eine Spur einfacher war (KISS = keep it short and simple). :)
Nun geht es ans einbinden. jQuery muss im Standardlayout, NICHT im OPW leer (siehe Tutorial), eingebunden werden. Dann geht es ans Modifizieren von Templates. Zuallererst wird mal das Template mod_onepagewebsitenavigation.html5 geändert:
PHP-Code:
<!-- indexer::stop -->
<nav class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?> role="navigation">
<a href="<?php echo $this->request; ?>#<?php echo $this->skipId; ?>" class="invisible"><?php echo $this->skipNavigation; ?></a>
<?php $this->insert('page-logo'); ?>
<?php echo $this->items; ?>
<a id="<?php echo $this->skipId; ?>" class="invisible"> </a>
</nav>
<!-- indexer::continue -->
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
Anmerkung: <?php $this->insert('page-logo'); ?> bezieht sich auf ein Template mit dem Logo, welches ich ins Navigationsbar einbezogen habe. Wer's nicht braucht, raus damit, wer das haben will, braucht nur ein Template mit dem klingenden Namen page-logo.html5 in seinen Template-Ordner des Themes speichern.
Als zweiten Punkt geht es dem Template nav_default.html5 an den Kragen. Hier mein Code:
PHP-Code:
<div class="navbar">
<ul class="<?php echo $this->level; ?>">
<?php for ($count=0; $count < count($this->items); $count++) : ?>
<?php
$item = $this->items[$count];
$item['href'] = '#'.$item['alias'];
?>
<?php if ($item['isActive']): ?>
<li class="active <?php echo ( $item['class'] != '' ? $item['class'] : ''); ?>"><span class="active<?php echo ( $item['class'] != '' ? $item['class'] : ''); ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li <?php echo ( $item['class'] != '' ? 'class="'.$item['class'].'"' : ''); ?>><a href="<?= $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>" class="<?php echo ( $item['class'] != '' ? $item['class'] : '' ); ?><?php echo ( $item['accesskey'] != '' ? 'accesskey="'.$item['accesskey'].'"' : ''); ?><?php echo ( $item['tabindex'] ? 'tabindex="'.$item['tabindex'].'"' : ''); ?> <?php echo ( $item['nofollow'] ? 'rel="'.nofollow.'"' : ''); ?> <?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endfor; ?>
</ul>
</div>
Und opw_default.html5 sieht bei mir so aus:
PHP-Code:
<?php for ( $count=0; $count < count( $this->entries); $count++): ?>
<?php
$page = $this->entries[$count];
$alias = $page['row']['alias'];
$page['cssId'] = 'id="'.$alias.'"';
?>
<!-- section start -->
<section <?php echo $page['cssId'] ?> class="<?php echo $page['class'].' '.$alias; ?> section">
<?php foreach($page['content'] as $section => $contents): ?>
<?php foreach($contents as $content): ?>
<div class="section-row">
<?php echo $content['html']; ?>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
<?php echo $page['subpages']; ?>
</section>
<!-- section end -->
<?php endfor; ?>
Ich hab das hier deshalb so gemacht, weil ich pro Seite eigentlich den <section>-Tag stehen haben wollte. Daher bitte mit etwas Vorsicht einpflanzen, da ich damit auch ein wenig das Layout von Contao verändere. Einfach ausprobieren, wird schon gehen.
Für Übereifrige habe ich dann noch ein wenig SCSS-Code, einfach als _navbar.scss speichern und dann einbinden wie sonst auch immer. Vorsicht: benötigt Bourbon UND Neat! Wie man das einbindet, ist hier zu sehen.
HTML-Code:
@mixin logo {
font-weight: 300;
font-size: 1.2rem;
letter-spacing: 0.5rem;
a, a:hover, a:link, a:focus, a:active {
color: white;
cursor: pointer;
}
}
nav {
@include outer-container(100%);
background-color: rgba(0, 0, 0, 0.75);
color:white;
padding: 1.5rem 3rem;
left: 0;
position: fixed;
right: 0;
z-index: 1030;
.logo {
@include span-columns(3);
@include logo;
}
> .navbar {
@include span-columns(9);
@include omega();
text-align: right;
> ul {
list-style: none;
overflow: hidden;
padding: 0;
> li {
display: inline-block;
padding: 0 0.5rem;
letter-spacing: 0.1 rem;
font-weight: 300;
> a {
color: #959595;
cursor: pointer;
}
> a:hover {
color: white;
}
}
}
}
}
Ich hab bei diesen Templates relativ viel, aus meiner Sicht, unnötigen Code und nicht notwendige Klassen rausgeworfen. Diese Implementation betrifft vorerst die Möglichkeit mit dem Skript aus [3], für [2] werde ich hier ein Follow-Up verfassen, weil ich das Plugin auch sehr mag.
Gruß, Thomas
