WordPress

Ein Flip Menü für WordPress

grasshopper 193721

Im Menü im Header der Startseite sollen die Items den Menütext, und bei Hover die Linkbeschreibung amzeigen. Beides sollte verlinkt sein. Die Linkbeschreibung ist ein optionales Feld in den WordPress-Einstellungen für Menüs. Sie wird aktiviert über den Button Ansicht anpassen, der zusätzliche Felder zum Anklicken bereithält. Hier Beschreibung anhaken, und den Bereich mit erneutem Klick auf Ansicht anpassen schließen.

bschreibung aktivieren

Eigenen Menu Walker anlegen (functions.php)

<?php
class Childnav_Walker extends Walker_Nav_Menu {
    
	// Displays start of an element. E.g '<li> Item Name'
    // @see Walker::start_el()
    function start_el(&$output, $item, $depth=0, $args=array(), $id = 0) {
    	$object = $item->object;
    	$type = $item->type;
    	$title = $item->title;
    	$description = $item->description;
    	$permalink = $item->url;
      	$output .= "<div class='flipper " .  implode(" ", $item->classes) . "'><div class='card'><div class='content'>";
        
      //Add SPAN if no Permalink
      if( $permalink && $permalink != '#' ) {
      	$output .= '<div class="card-front"><a href="' . $permalink . '">';
      } else {
      	$output .= '<div class="card-front"><span>';
      }
       
	  $output .= $title;

      if( $permalink && $permalink != '#' ) {
		$output .= '</a></div>';
	  } else {
		$output .= '</span></div>';
	  }

      if( $description != '' ) {
		if( $permalink && $permalink != '#' ) {
			$output .= '<div class="card-back"><a href="' . $permalink . '">';
		} else {
			$output .= '<div class="card-back"><span>';
		}
		  $output .= $description;
		  if( $permalink && $permalink != '#' ) {
			$output .= '</a></div></div>';
		  } else {
			$output .= '</span></div></div>';
		  }		  
	  }
	  

      if( $permalink && $permalink != '#' ) {
      	$output .= '</a></div>';
      } else {
      	$output .= '</span></div>';
	  }
	  
	  $output .'</div></div>';
	}
	
	function end_el( &$output, $item, $depth = 0, $args = array() ) {
		if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
			$t = '';
			$n = '';
		} else {
			$t = "\t";
			$n = "\n";
		}
		$output .= "</div>{$n}";
	}

} ?>

Das Markup, das dabei erzeugt wird

<div class="menu-wrap">
    <div class="flipper">
        <div class="card">
            <div class="content">
                <div class="card-front">
                    <a href="#">Über<br />uns</a>
                </div>
                <div class="card-back">
                    <a href="#">Wir lieben es, WordPress an individuelle Anforderungen anzupassen. Auf Sicherheit, Usability und Performance legen wir dabei besonderen Wert</a>
                </div>
            </div>
        </div>
    </div>
    <div class="flipper">
        <div class="card">
            <div class="content">
                <div class="card-front"><a href="#">WordPress<br />Erfahrung</a></div>
                <div class="card-back"><a href="#">Seit 2003 bloggen wir selbst mit WordPress, haben seine Entwicklung von Anfang an erlebt und sind mit und an ihr gewachsen</a></div>
            </div>
        </div>
    </div>
    <div class="flipper">
        <div class="card">
            <div class="content">
                <div class="card-front"><a href="https://blog.webentwicklerin.at/impressum/">Kontakt<br />und Info</a></div>
                <div class="card-back"><a href="https://blog.webentwicklerin.at/impressum/">Kontaktinformationen und Lageplan finden Sie im Impressum</a></div>
            </div>
        </div>
    </div>
    <div class="flipper">
        <div class="card">
            <div class="content">
                <div class="card-front"><a href="#">Team & Partner</a></div>
                <div class="card-back"><a href="#">Ein aufgewecktes und innovatives Team von Grafikern und Entwicklern sowie kompetente SEO-Partner wirken für Sie auf beste Performance auf allen Ebenen hin</a></div>
            </div>
        </div>
    </div>
</div>

Menü registrieren (functions.php)

<?php
function childtheme_setup_theme() {
	register_nav_menu( 'flipmenu', __( 'Flip Menu', 'my-chiltheme-textdomain' ) );
}
add_action( 'after_setup_theme', 'childtheme_setup_theme' );
?>

<h3jQuery Snippet einbinden (functions.php)

Es funktionerte mit den Browsern auf denen ich testete (bis IE 10, IE 9 kann noch keine Animationen).

<?php 
function childtheme_enqueue() {
	if ( has_nav_menu( 'flipmenu' ) ) {
		wp_enqueue_script( 'flip-action', get_stylesheet_directory_uri() . '/assets/js/flip-action.js', array( 'jquery' ), '', true );
	}
}
add_action( 'wp_enqueue_scripts', 'childtheme_enqueue' );
?>

Menü im Template aufrufen

<?php if ( has_nav_menu( 'flipmenu' ) ) : ?>
    <?php wp_nav_menu( array(
        'theme_location' => 'flipmenu',
        'menu_id'        => 'flipmenu-menu',
        'container' => '',
        'menu_class'	=> 'menu-wrap',
        'items_wrap' 	 => '<div id="%1$s" class="%2$s">%3$s</div>',
        'walker' 		 => new Childnav_Walker()
    ) ); ?>
<?php endif; ?>

Ein neues Menü anlegen, z.B. mit dem Namen flipmenu und seine Position als Flip Menu festlegen.

CSS

.menu-wrap {
    background-color: #212739;
}

.menu-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.menu-wrap::after {
    content: "";
    display: block;
    clear: both;
}

.menu-wrap>.flipper {
    position: relative;
    width: 96%;
    height: 0;
    padding-bottom: 96%;
    margin: 2% auto;
}

.card {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    vertical-align: top;
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    font-size: 25px;
    font-weight: bold;
}

.card .content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    /* content backface is visible so that static content still appears */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
    position: absolute; /* was relative but this is for Opera */
    width: 100%;
    height: 100%;
}

.card:hover .content,
.card.applyflip .content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}


.card .content .card-front {
    background-color: #cc0066;
    color: white;
}

.card .content .card-back {
    background-color: #980c58;
    color: white;
}

.card .content .card-front a,
.card .content .card-back a {
    color: white;
    text-decoration: none;
}

.card .content .card-front,
.card .content .card-back {
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 1.2em;
    border-radius: 14px;
    padding: 10%;
}

.card .content .card-front,
.card:hover .content .card-front,
.card.applyflip .content .card-front {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

.card .content .card-back,
.card:hover .content .card-back,
.card.applyflip .content .card-back {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .card-front,
.card:hover .content .card-back,
.card.applyflip .content .card-back {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}

.card:hover .content .card-front,
.card.applyflip .content .card-front,
.card .content .card-back {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
}

@keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}

@-webkit-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}

@-moz-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}

@-o-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}

@-ms-keyframes donothing {
    0% {}
    100% {}
}

@media screen and (min-width:56em) {
    .menu-wrap>.flipper {
        float: left;
        width: 46%;
        padding-bottom: 46%;
        margin: 2%;
    }
}

Das Javascript (hier nicht eingebunden)

jQuery('.flipper').hover(
    function() {
        jQuery(this).find('.card').toggleClass('applyflip');
    }
);

Gefunden bei Fiddle, modifiziert (flip auch auf :hover, nicht nur auf getoggelte KLasse).

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.