hamburger – Webers Web Info

<nav class="datenschutz-menu" role="navigation">
  <div class="container av-menu-mobile-active">
    <a href="#" class="mobile_menu_toggle no-scroll" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
      <span class="av-current-placeholder">Datenschutz</span>
      <span class="subnav-hamburger subnav-hamburger--spin-r">
        <span class="subnav-hamburger-box">
          <span class="subnav-hamburger-inner"></span>
        </span>
      </span>
    </a>
    [menu name="datenschutz"] 
  </div>
</nav>

function subnav_hamburger_first(){
?>
<script>
(function($){
    var $subham = $(".mobile_menu_toggle");
    $subham.on("click", function(a) {
		$subham.find(".subnav-hamburger").toggleClass("is-active");
		$subham.next(".menu-datenschutz-container").find('#menu-datenschutz').toggleClass("av-open-submenu");
    });
	$('#menu-datenschutz li').on("click", function(b) {
		$(this).addClass('selected').siblings().removeClass('selected');
		$(this).parents('#menu-datenschutz').toggleClass('av-open-submenu');
		$(this).parents('.av-menu-mobile-active').find('.subnav-hamburger').toggleClass('is-active');
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'subnav_hamburger_first');

/**************************************************************************************************************/
/******* second Burger - here always visible even on larger screens  ******************/


.responsive #top .datenschutz-menu {
  display: inline-block;
  width: calc(100vw - 305px) !important;
  float: left;
  position: relative;
  left: 0;
  height: auto;
  z-index: 2;
}

.av-logo-container .inner-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;  
}

.responsive #top .av-menu-mobile-active #menu-datenschutz {
  background: 
  radial-gradient(circle at 85% 80%,#3dbc00,transparent 60%),
  radial-gradient(circle at 39% 32%,#0057aa,transparent 100%),
  radial-gradient(circle at 50% 50%,#000,#000 100%) !important;
  right: 0;
  position: relative;
  min-width: 340px;
  top: 0px; 
}

.responsive #top  #menu-datenschutz li:last-of-type {
  margin-bottom: 10px !important;
}

.responsive #top .av-menu-mobile-active #menu-datenschutz.av-open-submenu {
  max-height: calc(100vh - 50px);
  width: auto;
  float: left;
  padding: 0 ;
  top: 0px;
}

#top #menu-datenschutz * {
  border: none !important;
}

.responsive #top .av-menu-mobile-active #menu-datenschutz {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  overflow-y: hidden;
  width: auto;
  min-width: 320px;
  float: left;
  -webkit-transition: max-height 0.7s linear;
  transition: max-height 0.7s linear;
}


.responsive #top .av-menu-mobile-active #menu-datenschutz > li {
  line-height: 1.4rm;
  padding-left: 10px;
  border-radius: 50px;
}


.responsive #top .av-menu-mobile-active #menu-datenschutz > li:first-child {
  margin-top: 8px
}

#top #menu-datenschutz > li.selected a {
  background-color: #888;
  color: #fff;
}

.responsive #top .av-menu-mobile-active #menu-datenschutz > li > a {
  padding: 2px 5px 2px 10px;
}

.responsive #top .av-menu-mobile-active #menu-datenschutz > li > a:hover,
.responsive #top .av-menu-mobile-active #menu-datenschutz > li > a:focus {
  text-decoration: none
}

#top #menu-datenschutz > li > a {
  font-size: 16px;
  line-height: 22px;
  border-radius: 7px;
  color: #fff;
  background: transparent;
  opacity: 1 !important;
  font-weight: bold;
  display: inline-block;
  width: 96% !important;
}

.responsive #top #wrap_all #header .container.av-menu-mobile-active {
  width: 100%;
  max-width: 100%;
}

#top .mobile_menu_toggle {
  float: none !important;
  text-align: left !important;
  padding: 0 5px !important;
}

#top .mobile_menu_toggle::before { 
  display: none 
}

.responsive #top .av-menu-mobile-active .mobile_menu_toggle {
  display: block !important;
  background: transparent;
  border: none;
}

#top .av-subnav-menu {
  margin-top: -1px;
}

#top .av-subnav-menu > li {
  padding: 5px 3px;
}

#top .av-subnav-menu > li > a {
  padding: 4px 8px;
  font-size: 16px;
  border-radius: 7px;
  color: #3669af;
  background: transparent;
  opacity: 1 !important;
  font-weight: bold;
}

.responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu {
  max-height: calc(100vh - 100px);
  width: auto;
  float: right;
  min-width: 320px
}

.responsive #top #scroll-top-link {
  display: block !important;
}
.responsive #top .av-switch-768 .av-menu-mobile-active .av-subnav-menu > li > a {
  padding:1px 10%
}
.responsive #top .av-switch-768 .av-menu-mobile-active .av-subnav-menu > li a::before {
  top:2px
}
.responsive #top .av-switch-768 .av-menu-mobile-active .av-subnav-menu > li:first-child {
  margin-top:4px
}


/**** Subnavigation Burger Styling ****/
#top .subnav-hamburger {
  padding: 0 0 0 10px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; 
}
#top .subnav-hamburger:hover {
  opacity: 0.7; 
}
#top .subnav-hamburger.is-active:hover {
  opacity: 0.7; 
}
#top .subnav-hamburger.is-active .subnav-hamburger-inner,
#top .subnav-hamburger.is-active .subnav-hamburger-inner::before,
#top .subnav-hamburger.is-active .subnav-hamburger-inner::after {
  background-color: #2d5c88; 
}

.html_header_transparency #top #header.av_header_transparency .subnav-hamburger-inner, 
.html_header_transparency #top #header.av_header_transparency .subnav-hamburger-inner::before, 
.html_header_transparency #top #header.av_header_transparency .subnav-hamburger-inner::after {
  background-color: #fff;
}

#top .subnav-hamburger-box {
  width: 35px;
  height: 24px;
  display: inline-block;
}

#top .subnav-hamburger-inner {
  display: block;
  top: 15px;
  margin-top: 1px; 
}

#top .subnav-hamburger-inner, 
#top .subnav-hamburger-inner::before, 
#top .subnav-hamburger-inner::after {
  width: 35px;
  height: 3px;
  background-color: #2d5c88;
  border-radius: 3px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease; 
}

#top .subnav-hamburger-inner::before, 
#top .subnav-hamburger-inner::after {
  content: "";
  display: block; 
}

#top .subnav-hamburger-inner::before {
  top: -10px; 
}

#top .subnav-hamburger-inner::after {
  bottom: -10px; 
}



/** Spin*/

#top .subnav-hamburger--spin .subnav-hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}
#top .subnav-hamburger--spin .subnav-hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; 
}
#top .subnav-hamburger--spin .subnav-hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}

#top .subnav-hamburger--spin.is-active .subnav-hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
}
#top .subnav-hamburger--spin.is-active .subnav-hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; 
}
#top .subnav-hamburger--spin.is-active .subnav-hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 
}

/** Spin Reverse*/
#top .subnav-hamburger--spin-r .subnav-hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}
#top .subnav-hamburger--spin-r .subnav-hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; 
}
#top .subnav-hamburger--spin-r .subnav-hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}

#top .subnav-hamburger--spin-r.is-active .subnav-hamburger-inner {
  transform: rotate(-225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
}
#top .subnav-hamburger--spin-r.is-active .subnav-hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; 
}
#top .subnav-hamburger--spin-r.is-active .subnav-hamburger-inner::after {
  bottom: 0;
  transform: rotate(90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 
}

button.subnav-hamburger:focus { 
  outline: none !important
}

Kontakt

Telefon

E-Mail