0
Auf meinem Dropdown-Menü möchte ich transform css hinzufügen, so wird es eine Art von Flip-Down-Effekt sein, wenn das Untermenü erscheint im Schweben. Ich habe die folgende css zu .ht-Hauptnavigation ul ul hinzugefügt, aber es macht nur das gesamte Menü verschwinden? Kann mir jemand dafür Lösungen anbieten? Danke im Voraus!Umwandlung css macht Menü verschwinden
jsfiddle ohne CSS-Transformation - https://jsfiddle.net/w1emxfm5/
jsfiddle mit CSS-Transformation - https://jsfiddle.net/n84u2xbL/
verwandeln css
-webkit-transform: scale(1,0);
-moz-transform: scale(1,0);
transform: scale(1,0);
-webkit-transform-origin: top;
-moz-transform-origin: top;
transform-origin: top;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;mein header.php
<?php
/**
* The header for our theme.
*
* @package Total
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="ht-page">
\t <header id="ht-masthead" class="ht-site-header">
\t \t <div class="ht-container ht-clearfix">
\t \t \t <div id="ht-site-branding">
\t \t \t \t <?php
\t \t \t \t if (function_exists('has_custom_logo') && has_custom_logo()) :
\t \t \t \t \t the_custom_logo();
\t \t \t \t else :
\t \t \t \t \t if (is_front_page()) : ?>
\t \t \t \t \t \t <h1 class="ht-site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
\t \t \t \t \t <?php else : ?>
\t \t \t \t \t \t <p class="ht-site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></p>
\t \t \t \t \t <?php endif; ?>
\t \t \t \t \t <p class="ht-site-description"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('description'); ?></a></p>
\t \t \t \t <?php endif; ?>
\t \t \t </div><!-- .site-branding -->
\t \t \t <nav id="ht-site-navigation" class="ht-main-navigation">
\t \t \t \t <div class="toggle-bar"><span></span></div>
\t \t \t \t <?php
\t \t \t \t wp_nav_menu(array(
\t \t \t \t \t 'theme_location' => 'primary',
\t \t \t \t \t 'container_class' => 'ht-menu ht-clearfix' ,
\t \t \t \t \t 'menu_class' => 'ht-clearfix',
\t \t \t \t \t 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
\t \t \t \t));
\t \t \t \t ?>
\t \t \t </nav><!-- #ht-site-navigation -->
\t \t </div>
\t </header><!-- #ht-masthead -->
\t <div id="ht-content" class="ht-site-content ht-clearfix">mein css
/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
#ht-masthead {
background: #FFF;
height: 70px;
border-bottom: 1px solid #eee;
z-index: 99;
transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-webkit-transition: height 0.3s ease;
position: fixed;
text-align: center;
width: 0 auto;
margin-right: 38px;
width: 100%;
}
.ht-sticky-header #ht-masthead {
position: fixed;
left: 0;
right: 0;
}
.ht-sticky#ht-masthead {
height: 74px;
}
.ht-sticky-header #ht-content {
position: relative;
z-index: 9;
padding-top: 94px;
}
#ht-site-branding {
float: left;
width: 30%;
transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
}
.ht-sticky #ht-site-branding {
padding: 5px 0;
}
#ht-site-branding img {
max-height: 60px;
width: auto;
}
.ht-main-header {
background: #f9f9f9;
padding: 45px 0;
margin-bottom: 25px;
}
.ht-main-title {
margin: 0 0 15px;
letter-spacing: 1px;
font-weight: 400;
text-transform: uppercase;
}
.ht-main-title:last-child {
margin-bottom: 0;
}
.ht-site-title {
font-family: 'futura_tbold';
font-size: 24px;
text-align: left;
text-transform: uppercase;
letter-spacing: 6px;
margin-left: 20px;
}
.ht-site-title a {
text-decoration: none;
color: #000;
}
.ht-site-title a:hover {
text-decoration: none;
color: #000;
}
.ht-site-description {
color: #EEE;
margin: 0;
font-size: 15px;
font-style: italic;
line-height: 1;
}
.ht-site-description a {
color: #333;
}
#total-breadcrumbs,
.woocommerce .woocommerce-breadcrumb {
font-size: 15px;
margin: 0;
color: inherit;
}
.woocommerce .woocommerce-breadcrumb a,
#total-breadcrumbs a {
color: #000;
}
.woocommerce .woocommerce-breadcrumb a:hover,
#total-breadcrumbs a:hover {
color: #000;
}
.taxonomy-description,
.term-description {
margin-bottom: 15px;
}
.taxonomy-description p:last-child,
.term-description p:last-child {
margin-bottom: 0;
}
/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/
.ht-section {
padding: 60px 0;
background: #FFF;
}
.ht-section-title-tagline {
margin-bottom: 60px;
text-align: center;
}
.ht-section-title {
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 36px;
width: 60%;
margin: 0 auto 15px;
}
.ht-section-title:last-child {
margin-bottom: 0;
}
.ht-section-tagline {
font-size: 20px;
width: 70%;
margin: 0 auto;
}
#ht-page {
width: 100% !important;
margin: 0 auto;
max-width: 100% !important;
overflow: hidden !important;
}
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#ht-site-navigation {
position: absolute;
width: 100%;
padding: 15px 0;
transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
float: right;
}
.ht-sticky #ht-site-navigation {
padding: 17px 0;
}
.ht-main-navigation .ht-menu {}
.ht-main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
display: inline-block;
position: relative;
}
.ht-main-navigation li {
float: left;
margin-left: 30px;
}
.ht-main-navigation a {
display: block;
text-decoration: none;
color: #000;
text-transform: uppercase;
font-size: 15px;
font-family: 'Raleway', sans-serif;
line-height: 36px;
padding: 0 15px;
font-weight: 600;
letter-spacing: 2px;
padding-bottom: 40px;
}
.ht-main-navigation ul ul {
display: none;
position: absolute;
left: 0;
top: 100%;
background: #FFF;
min-width: 200px;
right:0;
z-index: 999;
padding: 8px;
margin-top: 0px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
height:300px;
-webkit-transform: scale(1,0);
-moz-transform: scale(1,0);
transform: scale(1,0);
-webkit-transform-origin: top;
-moz-transform-origin: top;
transform-origin: top;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
}
.ht-sticky .ht-main-navigation ul ul {
margin-top: 17px;
}
.ht-main-navigation ul ul ul {
left: 100%;
top: 0;
margin: 0 0 0 8px;
border-top: 0;
}
.ht-sticky .ht-main-navigation ul ul ul {
margin-top: 0;
}
.ht-main-navigation ul ul a {
text-transform: none;
font-weight: 400;
color: #444;
line-height: 1.5;
padding: 10px 15px;
font-size: 14px;
text-align: left;
}
.ht-main-navigation ul ul li {
float: none;
margin: 0 0 5px;
}
.ht-main-navigation ul ul li:last-child {
margin-bottom: 0;
}
.ht-main-navigation ul li:hover > ul {
display: block;
}
.page-template-home-template .ht-main-navigation .current_page_item > a,
.page-template-home-template .ht-main-navigation .current-menu-item > a,
.page-template-home-template .ht-main-navigation .current_page_ancestor > a,
.home.blog .ht-main-navigation .current_page_item > a,
.home.blog .ht-main-navigation .current-menu-item > a,
.home.blog .ht-main-navigation .current_page_ancestor > a {
background: none;
color: inherit;
}
.ht-main-navigation li:hover > a,
.page-template-home-template .ht-main-navigation li:hover > a,
.home.blog .ht-main-navigation li:hover > a,
.ht-main-navigation .current_page_item > a,
.ht-main-navigation .current-menu-item > a,
.ht-main-navigation .current_page_ancestor > a,
.page-template-home-template .ht-main-navigation .current > a,
.home.blog .ht-main-navigation .current > a {
color: #000;
text-decoration: none;
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 15px;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
so? https://jsfiddle.net/n84u2xbL/1/ –
Es ist perfekt! Danke nochmal Michael, ich schätze die Hilfe sehr! – user6738171
oh toll, du bist willkommen. Ich werde eine Antwort einreichen. war nicht sicher, was du versucht hast :) –