{"id":654,"date":"2017-10-20T13:25:10","date_gmt":"2017-10-20T11:25:10","guid":{"rendered":"https:\/\/a-vista-studios.de\/blog\/?p=654"},"modified":"2018-01-20T15:32:10","modified_gmt":"2018-01-20T14:32:10","slug":"mobile-menue-ohne-javascript","status":"publish","type":"post","link":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/","title":{"rendered":"Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu"},"content":{"rendered":"

Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu<\/em>: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Men\u00fcs realisieren.<\/h3>\n

Mobile Men\u00fc ohne JavaScript \/ Mobile CSS Menu: Ein Mobiles Men\u00fc mit CSS zu erstellen ist gar nicht so schwer. Trotzdem verwendet das Gros der Websites umfangreiche und komplexe JavaScript-L\u00f6sungen, welche meist auf der jquery basieren.<\/p>\n

Es gibt jedoch gute Gr\u00fcnde, ein schlankes Mobile Men\u00fc ohne JavaScript einzusetzen:<\/strong><\/p>\n

    \n
  1. Mobiles CSS-Men\u00fcs funktionieren auch dann, wenn JavaScript abgeschaltet ist.<\/li>\n
  2. Mobile First<\/em><\/a>: Moderne Websites werden vom Mobilger\u00e4t aus entwickelt. Mobile First<\/em> ist dabei weitaus mehr als nur ein \u201eSchlagwort\u201c, denn bereits im Oktober 2016 hatte Google angek\u00fcndigt, dass der Mobile Index den Desktop Index als Hauptindex abl\u00f6sen wird. Das bedeutet, dass Google k\u00fcnftig nicht mehr pr\u00fcft, ob es zur Desktop-Version einer Website auch eine Mobile Version gibt, sondern Google geht den umgekehrten Weg. Die neue Priorisierung sorgt daf\u00fcr, dass Webentwickler<\/a> k\u00fcnftig noch st\u00e4rker auf eine Optimierung der mobilen Webseitenversion achten sollten.Da die mobilen Internetverbindungen in der Regel deutlich langsamer sind als schnelle DSL-Verbindungen und die Benutzer zudem nur \u00fcber ein begrenztes monatliches Datenvolumen verf\u00fcgen, sind schlanke, schnell ladende Website gefragt und im Vorteil. Denn das wird von Suchmaschinen honoriert:<\/li>\n
  3. Suchmaschinenoptimierung:
    \nSuchmaschinen m\u00f6chten dem Suchenden relevante Suchergebnisse bereitstellen. Dazu werden nicht nur die Seiteninhalte gepr\u00fcft, sondern auch die Ladezeiten. Websites, deren Inhaltsseiten nur einige hundert Kilobyte aufweisen sind daher gegen\u00fcber solchen im Vorteil, die mehrere Megabyte Datenvolumen im Gep\u00e4ck haben.<\/li>\n<\/ol>\n

    Mobile Men\u00fc ohne JavaScript<\/h2>\n

    Mobile CSS Menu: Nachfolgend stellen wir eine Anleitung f\u00fcr die Realisation eines schlanken Mobilen CSS-Men\u00fcs vor.<\/p>\nBEISPIEL ANSEHEN<\/span><\/a>\n

    Wie l\u00e4sst sich das Design unseres Beispiels umsetzen? Daf\u00fcr ben\u00f6tigen wir etwas HTML und nat\u00fcrlich entsprechendes CSS:<\/p>\n

    HTML (Body)<\/h3>\n
    <body>\r\n  <nav>\r\n    <div class=\"brand\"><a href=\"https:\/\/a-vista-studios.de\"><img src=\"logo_avs.png\" alt=\"\"\/><\/a><\/div>\r\n    <a href=\"#nav-m\" id=\"nav-m\"><img src=\"btn-mobile.png\" alt=\"\"\/><\/a>\r\n    <a href=\"#\" class=\"close\"><img src=\"btn-mobile-close.png\" alt=\"\"\/><\/a>\r\n    \r\n    <ul class=\"menu\">\r\n      <li><a href=\"#abschnitt1\">Abschnitt 1<\/a><\/li>\r\n      <li><a href=\"#abschnitt2\">Abschnitt 2<\/a><\/li>\r\n      <li><a href=\"#abschnitt3\">Abschnitt 3<\/a><\/li>\r\n      <li><a href=\"#abschnitt4\">Abschnitt 4<\/a><\/li>\r\n      <li><a href=\"#abschnitt5\">Abschnitt 5<\/a><\/li>\r\n    <\/ul>\r\n  <\/nav>\r\n\r\n  <main>\r\n    <div id=\"abschnitt1\">\r\n      <strong>Abschnitt 1<\/strong><br \/>\r\n        BLINDTEXT          \r\n    <\/div>\r\n    <div id=\"abschnitt2\">\r\n      <br \/>\r\n      <strong>Abschnitt 2<\/strong><br \/>\r\n      BLINDTEXT   \r\n    <\/div>      \r\n    <div id=\"abschnitt3\">\r\n      <br \/>\r\n      BLINDTEXT   \r\n    <\/div>      \r\n    <div id=\"abschnitt4\">\r\n      <br \/>\r\n      <strong>Abschnitt 4<\/strong><br \/>\r\n      BLINDTEXT > \r\n    <\/div>      \r\n    <div id=\"abschnitt5\">\r\n      <br \/>\r\n      <strong>Abschnitt 5<\/strong><br \/>\r\n        BLINDTEXT   \r\n    <\/div>             \r\n  <\/main>\r\n\r\n<\/body><\/pre>\n
     <\/p>\n
    CSS: Allgemeine Auszeichnungen und Logo<\/h3>\n
    \/*----- General Formating -----*\/\r\nbody, html {\r\n  font-family: Verdana, Arial, sans-serif;\r\n  font-size: 0.95em;\r\n  margin: 0;\r\n  padding: 0;\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\na:active, a:focus {outline: none;}\r\n\r\nmain {\r\n  margin: 3em 1em;\r\n  line-height: 180%;\r\n}\r\n\/*------------------------------*\/\r\n\r\n\r\n\/*----- Logo -----*\/\r\n.brand {\r\n  float: left;\r\n  padding: 0.5em 1em 0 0.5em;\r\n}\r\n\/*----------------*\/<\/pre>\n
     <\/p>\n
    CSS: Men\u00fc<\/h3>\n
    \/*----- Menu -----*\/\r\n\r\nnav {\r\n  margin: 0 auto;\r\n  width: 100%;\r\n  height: 11em;\r\n  text-align: right;\r\n  position: relative;\r\n  background: rgba(255, 255, 255, 1.0);\r\n  border-bottom: 1px solid white;\r\n}\r\n\r\nnav ul {\r\n  margin: 0;\r\n  padding: 8.1em 0 0 0;\r\n  height: 100vh;\r\n}\r\n\r\nnav ul li {\r\n  list-style: none;\r\n  margin: 0;\r\n  display: inline;\r\n}\r\n\r\nnav ul li a {\r\n  color: #009999;\r\n  position: relative;\r\n  padding: 0 0 0.5em 0;\r\n  display: inline-block;\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n}\r\n\r\nnav ul.menu li a:hover {\r\n  color: #03405f;\r\n  border-bottom: 2px solid #03405f;\r\n}\r\n\/*----------------*\/<\/pre>\n
     <\/p>\n
    CSS: Media Queries<\/h3>\n
    \/*----- Media Queries -----*\/\r\n@media screen and (min-width: 961px) {\r\n  nav ul.menu {\r\n    max-height: 20px;\r\n  }\r\n  nav a#nav-m,\r\n  nav a.close {\r\n    display: none;\r\n  }\r\n  nav ul li {\r\n    margin: 0 30px 0 0;\r\n  }\r\n}\r\n\r\n\r\n@media screen and (max-width: 960px) {\r\n  \/*Formatierung Mobiles Menue*\/\r\n  nav ul {\r\n    top: 12em;\r\n    position: absolute;\r\n    background: #ccc;\r\n    width: 100%;\r\n    left: -100%;\r\n\r\n    list-style-type:none;\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    -webkit-transition: all 0.6s ease;\r\n    -moz-transition: all 0.6s ease;\r\n    -o-transition: all 0.6s ease;\r\n    transition: all 0.6s ease;\r\n  }\r\n\r\n  nav ul li{\r\n    display: block;\r\n    text-align: left;\r\n    padding: 0em 0.5em;\r\n    border-bottom: 1px solid #fff;\r\n  }\r\n\r\n  nav ul li a {\r\n    color: #555;\r\n    padding: 1em 0;\r\n  }\r\n\r\n  nav ul.menu li a:hover {\r\n    border-bottom: 0;\r\n  }\r\n\r\n  \/*Hamburger-Icon*\/\r\n  nav a#nav-m img,\r\n  nav a.close img {\r\n    width: 40px;\r\n    height: auto;\r\n  }\r\n\r\n  nav > .close,\r\n  nav a#nav-m:target {\r\n    display: none;\r\n  }\r\n\r\n  nav a:target ~ ul,\r\n  nav a:target ~ .close {\r\n    display: inline-block;\r\n  }\r\n\r\n  nav a:target ~ .close {\r\n    position: absolute;\r\n    margin-left: -40px;\r\n  }\r\n\r\n  nav a:target ~ ul {\r\n    left: 0;\r\n  }\r\n}\r\n\/*--------------------------------------*\/<\/pre>\n
     <\/p>\n
    Erl\u00e4uterung des CSS f\u00fcr die Erstellung des Mobile CSS Menu<\/em><\/h2>\n
    Der gr\u00f6\u00dfte Teil des Codes ist nicht besonders komplex und der HTML-Bereich dabei besonders einfach gehalten. Im Bereich CSS: Allgemeine Auszeichnungen und Logo<\/em><\/strong> wird zun\u00e4chst die Schriftart sowie H\u00f6he und Breite des Anzeigebereichs festgelegt und definiert, dass beim Focus auf einen Link keine gestrichelten Linien angezeigt werden sollen.<\/p>\n
    Der Bereich CSS: Men\u00fc<\/em><\/strong> definiert ein einfaches Navigationsmen\u00fc f\u00fcr die Anzeige auf dem Desktop-PC. Es wird \u00fcber eine UL-Liste erstellt und enth\u00e4lt einige Angaben zur Formatierung des Men\u00fcs.<\/p>\n
    Spannend wird es im Bereich CSS: Media Queries<\/em><\/strong>.<\/p>\n
      \n
    1. Zun\u00e4chst wird festgelegt, dass das Hamburger-Icon des mobilen Men\u00fcs nicht angezeigt werden soll, wenn die Bildschirmbreite mehr als 960 Pixel betr\u00e4gt (@media screen and (min-width: 961px) {\u2026} ).<\/em><\/li>\n
    2. Danach wird dem Browser mitgeteilt, wie das Men\u00fc gestaltet werden soll, wenn die Breite des Browserfensters kleiner oder gleich 960 Pixel ist (@media screen and (max-width: 960px) {\u2026}<\/em> ).<\/li>\n
    3. nav ul {\u2026}<\/em><\/strong>
      \nDas Men\u00fc wird zun\u00e4chst verborgen, indem es um 100% nach links versetzt wird. Zus\u00e4tzlich definieren wir eine transition<\/em>, um \u00fcber CSS3 auch ohne JavaScript einen Animationseffekt zu verwirklichen.<\/li>\n
    4. nav ul li {\u2026}<\/em><\/strong>
      \n<\/em>\u00dcber display:block<\/em> wird erreicht, dass die Men\u00fcpunkte des mobilen Men\u00fcs nicht mehr in einer Zeile, sondern untereinander angezeigt werden.<\/li>\n
    5. \n
      \/*Hamburger-Icon*\/<\/em><\/h3>\n

      \n<\/em>Dieser Bereich ist f\u00fcr die Funktionalit\u00e4t des Hamburger-Men\u00fcs zust\u00e4ndig.
      \nEs gibt zwei Hamburger-Icons. Eins ist blau, das andere grau. Die beiden sind deckungsgleich \u00fcbereinander positioniert. Wird das blaue Hamburger-Icon angeklickt und dabei das Men\u00fc ausgefahren, so wird gleichzeitig das graue Hamburger-Icon sichtbar gesetzt und erscheint an der Position des blauen Icons.<\/p>\n
      Beim Klick auf das blaue Hamburger-Icon wird auf einen Anker referenziert (<a href=“#nav-m“\u2026)<\/em> und das blaue Hamburger-Icons wird ausgeblendet. Durch die Referenzierung l\u00e4sst sich der Zustand \u00fcber die CSS-Pseudoklasse :target <\/em>pr\u00fcfen.<\/p>\n
      Gleichzeitig wird die UL des Men\u00fcs von left:-100%;<\/em> auf left:0;<\/em> gesetzt (mittels nav a:target ~ ul{left: 0;} <\/em>) und bewegt sich dadurch von der bisherigen linken Positionierung (au\u00dferhalb des sichtbaren Bereichs) in das Betrachtungsfeld.<\/p>\n
      nav a#nav-m img, nav a.close img {\u2026}
      \n<\/em><\/strong>Die Anzeigegr\u00f6\u00dfe des Hamburger-Men\u00fc-Icons wird festgelegt.<\/p>\n
      nav > .close, nav a#nav-m:target {display: none<\/em>;}
      \n<\/strong>Standardeinstellung ist, dass das graue Hamburger-Men\u00fc-Icon (nav > .close<\/em>) nicht angezeigt wird. \u00dcber die CSS-Pseudoklasse :target<\/em> wird daf\u00fcr gesorgt, dass das blaue Hamburger-Men\u00fc-Icon verborgen wird, wenn es angeklickt wird und dabei den target<\/em> erh\u00e4lt (a#nav-m:target<\/em>).<\/p>\n
      nav a:target ~ ul, nav a:target ~ .close {display: inline-block;}
      \n<\/em><\/strong>Wenn der Link aktiv ist (wird auch hier \u00fcber die CSS-Peseudoklasse a:target<\/em> gepr\u00fcft), werden die Navigationsliste sowie das graue Hamburger-Men\u00fc-Icon auf sichtbar gesetzt.<\/li>\n<\/ol>\n
      Fazit: die Anleitung zur Erstellung eines Mobile Men\u00fc ohne JavaScript zeigt, dass sich auf relativ einfache Art ein Mobile CSS Menu<\/em> realisieren l\u00e4sst.<\/p>\n
       <\/p>\n
      Stichworte: Mobile Men\u00fc ohne JavaScript,<\/em> Mobile CSS Menu<\/em>,<\/em> Hamburger Men\u00fc<\/em><\/p>\n\n\n
      \n            \n
      \n    \n
      \n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n    <\/div>\n    \n
      \n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n
      \n            5\/5 - (5 votes)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"
      Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Men\u00fcs realisieren. Mobile Men\u00fc ohne JavaScript \/…<\/p>\n","protected":false},"author":2,"featured_media":679,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,17],"tags":[],"class_list":["post-654","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-technik","category-webdesign"],"yoast_head":"\nMobile Men\u00fc ohne JavaScript, Mobile CSS Menu, Hamburger Men\u00fc<\/title>\n<meta name=\"description\" content=\"Anleitung: Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Men\u00fcs realisieren.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu, Hamburger Men\u00fc\" \/>\n<meta property=\"og:description\" content=\"Anleitung: Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Men\u00fcs realisieren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Webdesign Tipps \/ Webdesign Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-20T11:25:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-20T14:32:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/04\/img_mobile_menue_ohne_javascript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"avs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"avs\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/\"},\"author\":{\"name\":\"avs\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f\"},\"headline\":\"Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu\",\"datePublished\":\"2017-10-20T11:25:10+00:00\",\"dateModified\":\"2018-01-20T14:32:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/\"},\"wordCount\":808,\"commentCount\":26,\"publisher\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/04\/img_mobile_menue_ohne_javascript.jpg\",\"articleSection\":[\"Web-Technik\",\"Webdesign\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/\",\"name\":\"Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu, Hamburger Men\u00fc\",\"isPartOf\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/04\/img_mobile_menue_ohne_javascript.jpg\",\"datePublished\":\"2017-10-20T11:25:10+00:00\",\"dateModified\":\"2018-01-20T14:32:10+00:00\",\"description\":\"Anleitung: Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Men\u00fcs realisieren.\",\"breadcrumb\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#primaryimage\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/04\/img_mobile_menue_ohne_javascript.jpg\",\"contentUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/04\/img_mobile_menue_ohne_javascript.jpg\",\"width\":1440,\"height\":530,\"caption\":\"Mobile Men\u00fc ohne JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/a-vista-studios.de\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#website\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/\",\"name\":\"Webdesign Tipps \/ Webdesign Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/a-vista-studios.de\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#organization\",\"name\":\"A Vista Studios\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png\",\"contentUrl\":\"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png\",\"width\":520,\"height\":236,\"caption\":\"A Vista Studios\"},\"image\":{\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f\",\"name\":\"avs\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g\",\"caption\":\"avs\"},\"url\":\"https:\/\/a-vista-studios.de\/blog\/author\/avs\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu, Hamburger Men\u00fc","description":"Anleitung: Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Men\u00fcs realisieren.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/","og_locale":"de_DE","og_type":"article","og_title":"Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu, Hamburger Men\u00fc","og_description":"Anleitung: Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Men\u00fcs realisieren.","og_url":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/","og_site_name":"Webdesign Tipps \/ Webdesign Blog","article_published_time":"2017-10-20T11:25:10+00:00","article_modified_time":"2018-01-20T14:32:10+00:00","og_image":[{"width":1440,"height":530,"url":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/04\/img_mobile_menue_ohne_javascript.jpg","type":"image\/jpeg"}],"author":"avs","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"avs","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#article","isPartOf":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/"},"author":{"name":"avs","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f"},"headline":"Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu","datePublished":"2017-10-20T11:25:10+00:00","dateModified":"2018-01-20T14:32:10+00:00","mainEntityOfPage":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/"},"wordCount":808,"commentCount":26,"publisher":{"@id":"https:\/\/a-vista-studios.de\/blog\/#organization"},"image":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/04\/img_mobile_menue_ohne_javascript.jpg","articleSection":["Web-Technik","Webdesign"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/","url":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/","name":"Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu, Hamburger Men\u00fc","isPartOf":{"@id":"https:\/\/a-vista-studios.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#primaryimage"},"image":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/04\/img_mobile_menue_ohne_javascript.jpg","datePublished":"2017-10-20T11:25:10+00:00","dateModified":"2018-01-20T14:32:10+00:00","description":"Anleitung: Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Men\u00fcs realisieren.","breadcrumb":{"@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#primaryimage","url":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/04\/img_mobile_menue_ohne_javascript.jpg","contentUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/04\/img_mobile_menue_ohne_javascript.jpg","width":1440,"height":530,"caption":"Mobile Men\u00fc ohne JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/a-vista-studios.de\/blog\/webdesign\/mobile-menue-ohne-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/a-vista-studios.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Mobile Men\u00fc ohne JavaScript, Mobile CSS Menu"}]},{"@type":"WebSite","@id":"https:\/\/a-vista-studios.de\/blog\/#website","url":"https:\/\/a-vista-studios.de\/blog\/","name":"Webdesign Tipps \/ Webdesign Blog","description":"","publisher":{"@id":"https:\/\/a-vista-studios.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/a-vista-studios.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/a-vista-studios.de\/blog\/#organization","name":"A Vista Studios","url":"https:\/\/a-vista-studios.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png","contentUrl":"https:\/\/a-vista-studios.de\/blog\/wp-content\/uploads\/2017\/06\/logo-avs.png","width":520,"height":236,"caption":"A Vista Studios"},"image":{"@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/07adbe83d83d582226dfd31d055a4b0f","name":"avs","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/a-vista-studios.de\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5bdd7a1dc25f9d118b55a38486fb376cf64dd092e623e48cac915d765d130ae3?s=96&d=mm&r=g","caption":"avs"},"url":"https:\/\/a-vista-studios.de\/blog\/author\/avs\/"}]}},"_links":{"self":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts\/654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/comments?post=654"}],"version-history":[{"count":10,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts\/654\/revisions"}],"predecessor-version":[{"id":1226,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/posts\/654\/revisions\/1226"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/media\/679"}],"wp:attachment":[{"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/media?parent=654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/categories?post=654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a-vista-studios.de\/blog\/wp-json\/wp\/v2\/tags?post=654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}