plugin

WP Select Box Navi ist eine Erweiterung für WordPress, mit der Du eine Select Box Navigation in Dein Theme integrieren & über zwei CSS Klassen steuern kannst.

download

Lade WP Select Box Navi im offiziellen Plugin Verzeichnis auf wordpress.org herunter.

wp select box navi

guesmo-wp-select-box-navi-devices WP Select Box Navi ist eine Erweiterung für WordPress und kann im offiziellen Pluginverzeichnis auf wordpress.org heruntergeladen werden. Hast Du das Plugin einmal installiert, kannst Du einfach über zwei CSS Klassen bestimmen, wann und wo die Select Box Navigation in Deinem Theme angezeigt werden soll.

Somit kannst Du Dein WordPress Theme fit für responsive Design machen und kein Besucher Deines Blogs muss sich mehr über die schlecht bedienbare Navigation auf seinem Smartphone oder Tablet ärgern.

funktionen

wpguesmo-bluefond-lumia Das mobile Web ist im Vormarsch und immer mehr Seitenaufrufe im Internet kommen von Smartphones oder Tablets. Und wer selbst viel mit dem Smartphone surft, trifft noch sehr häufig auf Websties, die nicht für kleine Displays ausgelgt sind. Da ist der Frust des Besuchers vorprogrammiert, wenn sich nur durch erhebliches Vergrößern und Hin- und Herschieben durch die Seiten navigieren lässt.
Deine Blog-Navigation als Selct Box

Das mobile Web ist im Vormarsch und immer mehr Seitenaufrufe im Internet kommen von Smartphones oder Tablets. Und wer selbst viel mit dem Smartphone surft, trifft noch sehr häufig auf Websties, die nicht für kleine Displays ausgelgt sind. Da ist der Frust des Besuchers vorprogrammiert, wenn sich nur durch erhebliches Vergrößern und Hin- und Herschieben durch die Seiten navigieren lässt.

WP Select Box Navi schafft nun eine denkbarst einfache Möglichkeit, die Navigationselemente Deines Blogs fit für die einfache mobile Nutzung zu machen.

Nach der Installation kannst Du über nur zwei CSS Klassen im Stylesheet deines WordPress Themes die Anzeige der Navigation als Select Box steuern. Weiter unten findest du dazu und zur Verwendung von CSS Media Queries für verschiedene Displaygrößen eine genaue Anleitung.
Unterstützung von Navigationselementen

WordPress bietet Dir verschiedene Möglichkeiten, die Navigation auf Deinem Blog zu gestalten. Dazu gehört die Ausgabe von Kategorien ebenso wie die von Seiten und individuellen Menüs.

Folgende Navigationsstrukturen werden von WP Select Box Navi unterstützt:

Kategorien
<? wp_list_categories(); ?>

Statische Seiten
<? wp_list_pages(); ?>

Individuelles Menü
<? wp_nav_menu(); ?>
<? wp_page_menu(); ?>
Schriftgröße für mobile Endgeräte

Zusätzlich zu der Navigation bietet dir WP Select Box Navi noch die Anzeige von geräteabhängigen Schriftgrößen.

Die beste mobile Navigation hilft dem Besucher nicht, wenn die angezeigte Schriftgröße zu klein ist. Dieses Plugin ergänzt Dein Theme daher um eine Meta Angabe, die die standartmäßige Schriftgröße des verwendeten Gerätes nutzt, also 100%.

Alle Angaben, die Du in Deinem Stylesheet für font-size verwendest, richten sich nach diesem Wert.

installation & nutzung

WP Select Box Navi installieren

Installiere das Plugin im Dashboard oder lade es von wordpress.org herunter und lege den Ordner “wp_select_box_navi” via FTP / SCP in das Vezeichnis “http://www.mein-blog.de/wp-content/plugins/” ab.
Aktiviere das Plugin im Pluginmenü des WordPress Dashboards
Füge die folgenden CSS Styles zu Deinem Theme Stylesheet:

Zeige oder blende die normale Navigation aus


.nav { display: none } /* verstecke die normale Navi */
.nav { display: block } /* zeige die normale Navi */

Zeige oder blende die Select Box Navigation aus


.tinynav { display: none } /* verstecke die Select Box Navi */
.tinynav { display: block } /* zeige die Select Box Navi */

CSS Media Queries

Mit Hilfe von CSS Media Queries kannst Du beide Navigationselemente nach der Displaygröße anzeigen lassen

Android, iOS & Desktop
Für alle gängigen (aktuellen) Desktop Browser, sowie mobilen Android und Apple Geräte kannst Du folgende Queries in Dein Stylesheet aufnehmen. Für die Anzeige von CSS Media Queries auf Windows Phone findest Du unten eine seperate Lösung.


/* show default if screen is larger than 1024px with */

@media screen and (min-width: 1024px)

{

.nav { display: block }

.tinynav { display: none }

}
/* show select box if screen is smaller than 1024px with */

@media screen and (max-width: 1023px)

{

.nav { display: none }

.tinynav { display: block }

}

Windows Phone
Für Windows Phone funtioniert die oben genannte Methode (mindestens bis WP 7 und dem IE 9 mobile) leider nicht, da der Internet Explorer die Media Queries leider nicht richtig interprtiert. Daher musst Du im Header Deines WordPress Themes ein IE speziefisches Stylesheet einbinden und ersetze “meintheme” durch den Namen Deines Themes. Was für IE 5-8 hilft, funktioniert genauso gut für den mobilen IE:

updates

Alle bisherigen Updates in chronologischer Reihenfolge

no. 2
Version 0.1 | 18. Dezember 2012 Update der Kompatibilität auf WordPress 3.5 & Optimierung des Codes.

no. 1
Version 0.2 | 17. Dezember 2012
Bereitstellung von WP Select Box Navi auf wordpress.org.

demo

Wildvogelaufzucht

(In Entwicklung) Der Blog der Wildvogelaufzucht ist komplett mit Artikeln aufgebaut und zeigt somit den Einsatz von WP Select Box Navi für Kategorien.

Greifvogelhilfe Mönchengladbach

(In Entwicklung) Die Select Box Navigation für statische Seiten funktioniert hier nur auf Smartphones & Tablets, da die WordPress Instanz über ein eigenes mobiles Theme verfügt.

wpguesmo-demo-windfederundco Windfeder&Co.

Für diese Website musste die Navigation des Spacing Themes, das eigentlich schon eine Select Box Navigation mitbringt, angepasst werden. Nach der Anpassung funktionierte die mobile Navigation nicht mehr, da diese nur für benutzrdefinierte Menüs ausgelegt ist.

@wp select box navi

Wenn Du Fragen zu WP Select Box Navi hast, schreib mir einfach eine Mail an wordpress@guesmo.com.

danksagung

Mein Dank geht an TinyNav.js, das den Grundstein für WP Select Box Navi legt.

wp select box navi

guesmo-wp-select-box-navi-devices WP Select Box Navi is an extension for WordPress and can be downloaded from the official plugin directory at wordpress.org. If you have installed the plugin once, you can just determine from two CSS classes when and where the select box navigation should be shown in your theme.

So you can make your WordPress theme fit for responsive design and no visitor of your blog needs to be sill angry about the bad use navigation on his smartphone or tablet.

functions

wpguesmo-bluefond-lumia-en The mobile web is on the rise and more and more page views on the internet will come from smartphones or tablets. And who surfs a lot on the web using a smartphone himself still gets very often to websties that are not optimised for small displays.The frustration of the visitors is inevitable, if they can only navigate through the pages by zooming in and out.

Your blog navigation as a select box

The mobile web is on the rise and more and more page views on the internet will come from smartphones or tablets. And who surfs on the web a lot using a smartphone, still gets many websties that are not optimised for small displays yet. The frustration of visiters is inevitable, if they can only navigate through the pages by .

WP Select Box Navi now gives you a very simple tool to make the navigation elements of your blog fit well to mobile devices.

After installation, you only have to set two classes in the CSS style sheet of your WordPress theme to display the navigation as a select box. Please follow the introductions below for integration and usage of media queries.

Support for navigation elements

WordPress offers you several ways to display a navigation on your blog. This includes the output of categories as well as pages and individual menus.

The following navigation structures are supported by WP Select Box Navi:

Categories
<? “>wp_list_categories ()?>

Static pages
<? “>wp_list_pages ()?>

Individual menu
<? “>wp_nav_menu ()?>
<? “>wp_page_menu ()?>

Font size for mobile devices

In addition to the navigation you select box WP Navi there is yet another indication of device-dependent font size.

The best GPS navigation system helps the visitor not when the display font size is too small. This plugin your theme therefore supplemented by a meta statement that uses the standart font size of the device used, ie 100%.

All the information that you use in your style sheet font-size must depend on this value.

installation & useage

Install WP Select Box Navi

Make sure your Theme using wp_head();! If not, add the function to the “header.php” file in your theme directory right before the closing tag.
Install the Plugin from the dashboard or download it from wordpress.org and load the folder “wp_select_box_navi” in to the “http://www.my-blog.com/wp-content/plugins/” directory
Activate the Plugin from plugin menu in the WordPress dashboard
Add the following CSS styles to your Theme stylesheet:

Show or hide the default navigation


.nav { display: none } /* hide default navi */ 
.nav { display: block } /* show default navi */

Show or hide the select box navigation


.tinynav { display: none } /* hide select box navi */
.tinynav { display: block } /* show select box navi */

Media queries

With adding CSS media queries to your styles you can switch both navigation types by display size

Android, iOS & Desktop
For all current (up todate) desktop browser, as well as Android and Apple mobile devices you can use the following queries in your stylesheet. For the display of CSS Media Queries on Windows Phone you find a separate solution below.


@media screen and (min-width: 1024px) /* show default if screen is larger than 1024px with */ { .nav { display: block } .tinynav { display: none } }
@media screen and (max-width: 1023px) /* show select box if screen is smaller than 1024px with */ { .nav { display: none } .tinynav { display: block } }

Windows Phone
For Windows Phone the method shown above (at least until the WP 7 and IE 9 mobile) does not work, because the Internet Explorer interprts media queries not correct. Therefore you have to include an specific IE stylesheet in the header.php file of your WordPress theme and replace “mytheme” with the name of your active theme. What´s useful for IE 5-8 just works for IE mobile as well:

updates

All updates in chronological order

no 2
Version 0.1 | 18 December 2012
Update of the compatibility to WordPress 3.5 & optimization of the code.

no 1
Version 0.2 | 17 December 2012
Provision of WP Select Box Navi on wordpress.org.

demo

Breeding of wild birds
(In development) The blog of breeding wild birds is completely built with articles and shows the use of WP for Select Box Navi for categories.

Bird of pray help Mönchengladbach
(In development), the select box navigation for static pages works only on smartphones and tablets, because the WordPress site has its own mobile theme.

Windfeder & Co. wpguesmo-demo-windfederundco
For this website i had to change the default navigation of the spacing theme that has actually the select box navigation already installed. But this function is only designed for custom menus so i had to programm the plugin to support the responsive navigation.

@ Wp select box navi

If you have questions about WP Select Box Navi, just write me an email to wordpress@guesmo.com.

thanks

My thanks to TinyNav.js that gives the basics for WP Select Box Navi.

wp select box navi

funktionen

WP Select Box Navi schafft nun eine denkbarst einfache Möglichkeit, die Navigationselemente Deines Blogs fit für die einfache mobile Nutzung zu machen.

WordPress bietet Dir verschiedene Möglichkeiten, die Navigation auf Deinem Blog zu gestalten. Dazu gehört die Ausgabe von Kategorien ebenso wie die von Seiten und individuellen Menüs.

Folgende Navigationsstrukturen werden von WP Select Box Navi unterstützt:

Kategorien

Statische Seiten

Individuelles Menü

Schriftgröße für mobile Endgeräte

Zusätzlich zu der Navigation bietet dir WP Select Box Navi noch die Anzeige von geräteabhängigen Schriftgrößen.

Alle Angaben, die Du in Deinem Stylesheet für font-size verwendest, richten sich nach diesem Wert.

installation & nutzung

WP Select Box Navi installieren

Zeige oder blende die normale Navigation aus


.nav { display: none } /* verstecke die normale Navi */
.nav { display: block } /* zeige die normale Navi */

Zeige oder blende die Select Box Navigation aus


.tinynav { display: none } /* verstecke die Select Box Navi */
.tinynav { display: block } /* zeige die Select Box Navi */

CSS Media Queries

Mit Hilfe von CSS Media Queries kannst Du beide Navigationselemente nach der Displaygröße anzeigen lassen


/* show default if screen is larger than 1024px with */

@media screen and (min-width: 1024px)

{

.nav { display: block }

.tinynav { display: none }

}
/* show select box if screen is smaller than 1024px with */

@media screen and (max-width: 1023px)

{

.nav { display: none }

.tinynav { display: block }

}

updates

Alle bisherigen Updates in chronologischer Reihenfolge

no. 2
Version 0.1 | 18. Dezember 2012 Update der Kompatibilität auf WordPress 3.5 & Optimierung des Codes.

no. 1
Version 0.2 | 17. Dezember 2012
Bereitstellung von WP Select Box Navi auf wordpress.org.

demo

Wildvogelaufzucht

(In Entwicklung) Der Blog der Wildvogelaufzucht ist komplett mit Artikeln aufgebaut und zeigt somit den Einsatz von WP Select Box Navi für Kategorien.

Greifvogelhilfe Mönchengladbach

(In Entwicklung) Die Select Box Navigation für statische Seiten funktioniert hier nur auf Smartphones & Tablets, da die WordPress Instanz über ein eigenes mobiles Theme verfügt.

wpguesmo-demo-windfederundco Windfeder&Co.

@wp select box navi

Wenn Du Fragen zu WP Select Box Navi hast, schreib mir einfach eine Mail an wordpress@guesmo.com.

danksagung

Mein Dank geht an TinyNav.js, das den Grundstein für WP Select Box Navi legt.