===================================================================
Das Script für die responsive Navigation herunterladen bei: http://slicknav.com
Die Datei "SlickNav-master.zip" entpacken
und den kompletten Ordner "slickNav-master" ablegen:
".../template/lib/slickNav-master"
Den so kopierten Ordner Umbenenen in: ".../template/lib/slickNav/"
----------------------------------------------------------
Das Script für die Language-Umschaltung "phpwcms-languageSwitch" hier herunterladen:
https://github.com/slackero/phpwcms-extended
Die beiden enthaltenen Dateien entsprechend der Anweisung, an die "passende" Stelle kopieren.
----------------------------------------------------------
In der Datei: "lang.init.php"
=================
ab Zeile 23 die korrekten Kategorie-IDs für die einzelnen Sprachbereiche eingeben:
Code: Select all
$phpwcms['id_lang'] = array(
// cat-ID LANG
60 => 'de', // Hier die korrekte Cat-ID für den DEUTSCHEN Bereich eingeben !
61 => 'en', // Hier die korrekte Cat-ID für den ENGLISCHEN Bereich eingeben !
// 88 => 'fr', //
// 99 => 'es' //
);
$phpwcms['lang_id'] = array_flip($phpwcms['id_lang']);
===================
ab Zeile 21:
Code: Select all
$content_search = array(
'nav_main' => '{NAV_MAIN}', // aktivieren !
'switch_lang' => '{SWITCH_LANG}',
'current_lang' => '{LANG}'
);
$content_replace = array(
'nav_main' => '', // aktivieren !
'switch_lang' => '',
'current_lang' => $phpwcms['i18_lang']
);
$content_search_regexp = array();
$content_replace_regexp = array();
Code: Select all
'lang_native' => array(
'de' => array('DEUTSCH', 'Deutsch'), // 1.Wert = Anzeige im FrontEnd | 2.Wert = LINK-Text
'en' => array('ENGLISH', 'English'),
Code: Select all
// Take the language switch menu
$content_replace['switch_lang'] = implode(LF, $content['auto_lang']['opposite']);
// Build the main menu (BootStrap styled) "B"= Standard | "P" = Parent Element anzeigen
// $content_replace['nav_main'] = buildCascadingMenu('B,'.$phpwcms['nav_entry_id'].', , active|nav navbar-nav navbar-right, active'); //nav-justified
// Neue NAV_LIST_UL Anweisung, fuer die Verwendung als "slickNav" Menue
$content_replace['nav_main'] = buildCascadingMenu('P,'.$phpwcms['nav_entry_id'].',,,,slickNav');
Nachfolgend sind die später gekommenen Vorschläge von Oliver jetzt (jedoch ohne den CSS "Kram") eingearbeitet worden. Ordnung in das Chaos - insbesondere hinsichtlich der Verteilung von Formatierungen etc. - sollte/muss jedoch der interessierte Leser selber bringen!
Code: Select all
<!-- CSS: {TEMPLATE}lib/slickNav/dist/slicknav.css -->
<!-- CSS: /* Klar, das gehoert nach dem Testen natuerlich in eine CSS-Datei */
#slickNav-container { display: block; } /* Horizontale Hauptnavigation / 1. Ebene anzeigen */
.slicknav_menu { display: none; }
.slicknav { display: none; }
@media screen and (max-width:979px) { /* Grenzwert, bei dem die Navigation umschalten soll */
.slicknav_menu { display: block; }
.js #slickNav_0 { display: none; } /* 0 = Kategorie-ID der "index" Ebene */
.js #slickNav_60 { display: none; } /* 60 = Kategorie-ID der "de" Startebene */
.js #slickNav_61 { display: none; } /* 61 = Kategorie-ID der "en" Startebene */
.js .slicknav { display: block; }
}
-->
<!-- Die nachfolgende "Aktivierung von jQuery" sollte wohl besser in der Vorlage (Backend) vorgenommen werden ! -->
<!-- JS: http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js -->
<!-- JS: http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js -->
<!-- JS: {TEMPLATE}lib/slickNav/dist/jquery.slicknav.js -->
<!-- JS: $(function(){
$("#slickNav-container").children().first().slicknav({
prependTo: 'body', // Element, jQuery object, or jQuery selector string to prepend the mobile menu to.
showChildren: false, // false / Show children of parent links by default.
removeIds: false, // false / Remove IDs from all menu elements. Defaults to true if duplicate is true.
removeClasses: false, // false / Remove classes from all menu elements.
closeOnClick: false, // false / Close menu when a link is clicked.
brand: 'pepes SandBox', // Site-Name Anzeige im Header
label: 'slickNav' // Bezeichnung des Menue-Icons, wenn gewuenscht
});
});
-->
<!-- CSS: /* Fuer die Anzeige der horizontalen Navigation verwendete Formatierung, die spaeter jedoch besser in einer CSS-Datei aufgehoben ist! */
#slickNav-container { background: #111; }
#slickNav-container ul {
width: 960px; list-style-type: none; margin: 0px auto; padding: 0 10px; }
#slickNav-container ul ul { display: none; }
#slickNav-container li {
float: left;
background: #444;
padding: 5px 10px;
margin: 29px 1px 0px;
text-decoration: none;
font: 12px "Lucida Grande", Lucida, Verdana, sans-serif;
text-transform: uppercase;
}
#slickNav-container li a { color: #fff; }
#slickNav-container li a:hover { color: red; text-decoration: none; }
-->
<!-- Nachfolgend wird die Navigation eingefuegt. / Ganz oben im Haupttemplate einsetzen! -->
<div id="slickNav-container" class="clearfix">
<!-- Die NAV_LIST_UL typische Navigation wurde ja zuvor schon in der Datei "lang.render.php" eingestellt! -->
{NAV_MAIN}
<div style="clear:both;"></div><!-- Klar machen wir das CLEAR-Gedöns eleganter mit dem "clearfix" ... so denn in der verwendeten CSS tatsaechlich vorhanden -->
</div>
<!-- CSS: /* Damit der Language-Switch nach "was aussieht", ist noch erforderlich. Auch dieser Bereich ist besser in einer CSS-Datei aufgehoben! */
.lang-switch { float: left; opacity: 0.5; text-decoration: none;
margin: 0 2px 5px 0; padding: 4px 8px 4px 32px; border: 1px solid #666;
}
.lang-switch.lang-de {
background: #eee url(../../../img/famfamfam/lang/de.png) 8px center no-repeat;
}
.lang-switch.lang-en {
background: #eee url(../../../img/famfamfam/lang/en.png) 8px center no-repeat;
}
.lang-switch.lang-de.lang-active, .lang-switch.lang-en.lang-active {
background-color: #fff; opacity: 1;
}
-->
<!-- Der Language-Switch selber soll genau HIER erscheinen: -->
{SWITCH_LANG}
<!-- Um auch das Breadcrumb-Menue jeweils in der sprachabhaengigen Startkategorie beginnen zu lassen: -->
<div id="breadcrumb-container">
[B]@@Sie sind hier@@ : [/B] [LEVEL1_ID]{BREADCRUMB:{LEVEL1_ID}}[/LEVEL1_ID][LEVEL1_ID_ELSE]{BREADCRUMB}[/LEVEL1_ID_ELSE]
</div>
Tante EDIT meint:
Die "SandBox" heisst übrigens so, weil dort gerade ein paar Navigationen "ausprobiert" werden und natürlich noch eine Menge Sand im Getriebe ist ... den jeder bitte selber an die richtige Stelle schaufeln sollte!
Wer Fehler findet oder Verbesserungsvorschläge hat, bitte gerne hier anhängen!
Viel Spass beim Spielen!!! und - wie gesagt - besser kann ich's nicht! Du machst das garantiert besser
