{"id":130280,"date":"2025-05-10T13:30:24","date_gmt":"2025-05-10T11:30:24","guid":{"rendered":"https:\/\/netzwerk.design\/?page_id=130280"},"modified":"2026-04-20T09:53:32","modified_gmt":"2026-04-20T07:53:32","slug":"demo-side-menu","status":"publish","type":"page","link":"https:\/\/netzwerk.design\/en\/demo-sidemenu\/","title":{"rendered":"Demo side menu"},"content":{"rendered":"<style>\n@media(min-width: 1025px){\n  .gb-site-header {display:none;}\n}\n<\/style>\n\n\n\n<div class=\"gb-element-ff9e7ec9 alignfull full\">\n<img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"984\" class=\"gb-media-fe3fb53b img-kb-infinite\" src=\"https:\/\/netzwerk.design\/wp-content\/uploads\/24CP0710_edit1_2000.webp\" alt=\"Themes: Fullwide, Sidebar, Sidemenu - netzwerk.design\" srcset=\"https:\/\/netzwerk.design\/wp-content\/uploads\/24CP0710_edit1_2000.webp 2000w, https:\/\/netzwerk.design\/wp-content\/uploads\/24CP0710_edit1_2000-600x295.webp 600w, https:\/\/netzwerk.design\/wp-content\/uploads\/24CP0710_edit1_2000-200x98.webp 200w, https:\/\/netzwerk.design\/wp-content\/uploads\/24CP0710_edit1_2000-768x378.webp 768w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/>\n\n\n\n<figcaption class=\"gb-text gb-text-d5219274\">Photo | Claus Pescha<\/figcaption>\n\n\n\n<div class=\"gb-element-a12f05fe slick-slider\">\n<div class=\"gb-element-6586e089\">\n<div class=\"gb-carousel gb-carousel-2e738df5\" data-slides-per-view=\"1\" data-space-between=\"0px\" data-pagination-type=\"progressbar\" data-autoplay-enabled=\"true\" data-autoplay-disable-on-interaction=\"false\" data-autoplay-pause-on-mouse-enter=\"false\" data-speed=\"500\" data-effect=\"fade\" data-autoplay-delay=\"4000\" data-carousel-id=\"2e738df5\">\n<div class=\"gb-carousel-items\">\n<div class=\"gb-carousel-item\">\n<h2 id=\"sidemenu1-fixed-left-navigation-wide\" class=\"gb-text big gb-text-4ad86a28\">SIDEMENU<br>1 | Fixed left navigation (wide)<\/h2>\n<\/div>\n\n\n\n<div class=\"gb-carousel-item\">\n<h2 id=\"sidemenu2-full-responsive\" class=\"gb-text big gb-text-038b2f55\">SIDEMENU<br>2 | Full responsive<\/h2>\n<\/div>\n\n\n\n<div class=\"gb-carousel-item\">\n<h2 id=\"sidemenu3-fast-and-future-proof\" class=\"gb-text big gb-text-f56cd7b2\">SIDEMENU<br>3 | Fast and future proof<\/h2>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-element-1ac23710 alignfull\">\n<div class=\"gb-element-db213dd5\">\n<h3 id=\"sidemenu-the-revival\" class=\"gb-text-5ffb99d1\"><span class=\"gb-shape\"><svg viewbox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" data-name=\"Ebene 2\" id=\"Ebene_2\">\n  <defs>\n    <style>\n      .cls-1 {\n        fill: #ffc043;\n      }\n\n      .cls-2 {\n        fill: #aaa;\n      }\n\n      .cls-3 {\n        fill: none;\n        stroke: #777;\n        stroke-miterlimit: 10;\n        stroke-width: 3px;\n      }\n\n      .cls-4 {\n        fill: #fff;\n      }\n\n      .cls-5 {\n        fill: #222;\n      }\n    <\/style>\n  <\/defs>\n  <g data-name=\"Ebene 1\" id=\"Ebene_1-2\">\n    <g>\n      <g>\n        <rect ry=\"7.5\" rx=\"7.5\" height=\"397\" width=\"397\" y=\"1.5\" x=\"1.5\" class=\"cls-4\"><\/rect>\n        <path d=\"M391,3c3.31,0,6,2.69,6,6v382c0,3.31-2.69,6-6,6H9c-3.31,0-6-2.69-6-6V9c0-3.31,2.69-6,6-6h382M391,0H9C4.03,0,0,4.03,0,9v382c0,4.97,4.03,9,9,9h382c4.97,0,9-4.03,9-9V9c0-4.97-4.03-9-9-9h0Z\" class=\"cls-4\"><\/path>\n      <\/g>\n      <path d=\"M391,400H9C4.03,400,0,395.97,0,391v-71h400v71c0,4.97-4.03,9-9,9Z\" class=\"cls-5\"><\/path>\n      <path d=\"M76.92,0v400H8.73c-4.33,0-7.83-3.51-7.83-7.83V7.83C.89,3.51,4.4,0,8.73,0h68.19Z\" class=\"cls-1\"><\/path>\n      <path d=\"M391,3c3.31,0,6,2.69,6,6v382c0,3.31-2.69,6-6,6H9c-3.31,0-6-2.69-6-6V9c0-3.31,2.69-6,6-6h382M391,0H9C4.03,0,0,4.03,0,9v382c0,4.97,4.03,9,9,9h382c4.97,0,9-4.03,9-9V9c0-4.97-4.03-9-9-9h0Z\" class=\"cls-5\"><\/path>\n      <g>\n        <rect height=\"282.58\" width=\"178.73\" y=\"20\" x=\"150.55\" class=\"cls-2\"><\/rect>\n        <g>\n          <line y2=\"79.75\" x2=\"279.83\" y1=\"79.75\" x1=\"172.61\" class=\"cls-3\"><\/line>\n          <line y2=\"106.64\" x2=\"261.88\" y1=\"106.64\" x1=\"172.61\" class=\"cls-3\"><\/line>\n          <line y2=\"134.83\" x2=\"247.61\" y1=\"134.83\" x1=\"172.61\" class=\"cls-3\"><\/line>\n        <\/g>\n      <\/g>\n      <circle r=\"12.5\" cy=\"29\" cx=\"30.41\" class=\"cls-5\"><\/circle>\n    <\/g>\n  <\/g>\n<\/svg><\/span><span class=\"gb-text\">SIDEMENU - The revival<\/span><\/h3>\n\n\n\n<p class=\"gb-text\">SIDEMENU is our revival of the classic website layout from the 90s: menu on the left, content on the right, only here in a modern and fully responsive implementation. SIDEMENU automatically adapts to any screen size, scales the content and reorganises it for intuitive operation. On tablet and mobile, the side menu disappears and the theme works like FULLWIDE.<\/p>\n\n\n\n<p class=\"gb-text\">Test the flexibility of SIDEMENU by changing the window width of your browser.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-element-c2ef5b20 alignfull\">\n<div class=\"gb-element-104e6d2a\">\n<h1 id=\"sidemenu-by-netzwerkdesign\" class=\"gb-text topline gb-text-e105b06f\">SIDEMENU - by netzwerk.design<\/h1>\n\n\n\n<h2 id=\"drei-basisthemes-fur-jedes-design\" class=\"gb-text\">Three basic themes - for every design<\/h2>\n\n\n\n<p class=\"gb-text\">Every website has one of three basic layouts. We then use these three basic layouts to realise every web design. Our three basic themes are the result of our many years of experience as web developers for WordPress websites. All themes are based on GeneratePress One, which we believe is the fastest and most professional WordPress theme on the market.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-element-8a4b31fc alignfull\" id=\"vergleichstabelle\">\n<div class=\"gb-element-3514fe69\">\n<div class=\"gb-element-c645c6eb\">\n<div class=\"gb-element-a5092a17\">\n<a href=\"https:\/\/netzwerk.design\/en\/demo-full-width\/\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"400\" class=\"gb-media-7828dfc5\" src=\"https:\/\/netzwerk.design\/wp-content\/uploads\/WIDE100.svg\" alt=\"Theme Fullwide - netzwerk.design\"\/><\/a>\n\n\n\n<div class=\"gb-text slogan-tiny gb-text-01b3bf53\"><strong>FULLWIDE<\/strong><\/div>\n\n\n\n<div class=\"gb-text gb-text-93bb2f2e\">full responsive<\/div>\n\n\n\n<div class=\"gb-text gb-text-aac7e1ac\">top menu<\/div>\n\n\n\n<div class=\"gb-text gb-text-343fa2e4\">slideout menu<br>(mobile)<\/div>\n\n\n\n<div class=\"gb-text gb-text-f190176a\">slick slider<\/div>\n\n\n\n<div class=\"gb-text gb-text-72a82952\">webp image format<\/div>\n\n\n\n<div class=\"gb-text gb-text-0c6e4a6a\">based on GeneratePress One<\/div>\n<\/div>\n\n\n\n<div class=\"gb-element-97b68dfc\">\n<a href=\"https:\/\/netzwerk.design\/en\/demo-sidebar\/\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"400\" class=\"gb-media-40d43f5c\" src=\"https:\/\/netzwerk.design\/wp-content\/uploads\/SIDEBAR40.svg\" alt=\"Theme Sidebar - netzwerk.design\"\/><\/a>\n\n\n\n<div class=\"gb-text slogan-tiny gb-text-a13a5452\"><strong>SIDEBAR<\/strong><\/div>\n\n\n\n<div class=\"gb-text gb-text-e9cc0759\">full responsive<\/div>\n\n\n\n<div class=\"gb-text gb-text-7aeeba13\">fixed sidebar + top menu<\/div>\n\n\n\n<div class=\"gb-text gb-text-c66b6e53\">slideout menu<br>(mobile)<\/div>\n\n\n\n<div class=\"gb-text gb-text-cb190efa\">slick slider<\/div>\n\n\n\n<div class=\"gb-text gb-text-a2cbf1e1\">webp image format<\/div>\n\n\n\n<div class=\"gb-text gb-text-3496b119\">based on GeneratePress One<\/div>\n<\/div>\n\n\n\n<div class=\"gb-element-63cf3b50\">\n<a href=\"https:\/\/netzwerk.design\/en\/demo-side-menu\/\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"400\" class=\"gb-media-abcafdcb\" src=\"https:\/\/netzwerk.design\/wp-content\/uploads\/SIDEMENU20.svg\" alt=\"Theme Sidemenu - netzwerk.design\"\/><\/a>\n\n\n\n<div class=\"gb-text slogan-tiny gb-text-6097e760\"><strong>SIDEMENU<\/strong><\/div>\n\n\n\n<div class=\"gb-text gb-text-b13669e8\">full responsive<\/div>\n\n\n\n<div class=\"gb-text gb-text-31d55b21\">fixed sidemenu<\/div>\n\n\n\n<div class=\"gb-text gb-text-95a39bfe\">slideout menu<br>(tablet + mobile)<\/div>\n\n\n\n<div class=\"gb-text gb-text-b9a0c787\">slick slider<\/div>\n\n\n\n<div class=\"gb-text gb-text-b7a4cf3f\">webp image format<\/div>\n\n\n\n<div class=\"gb-text gb-text-5044bdcb\">based on GeneratePress One<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-element-1a475e22  alignfull\">\n<div class=\"gb-element-799d61e4\">\n<div class=\"gb-element-5b9be54e\">\n<div class=\"gb-element-59e9b917\">\n<h2 id=\"blockvorlagen-mit-denen-sie-grafisch-perfekte-inhalte-erstellen\" class=\"gb-text gb-text-cc3820e5\">Block templates with which you can create graphically perfect content<\/h2>\n\n\n\n<p class=\"gb-text\">We have a wealth of predefined block templates available for each of our themes. Even if you create your content yourself, you can select these templates and then fill them with your text and images.<\/p>\n<\/div>\n\n\n\n<div>\n<figure class=\"gb-element-be15c4f7\">\n<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"800\" class=\"gb-media-629be2c9\" src=\"https:\/\/netzwerk.design\/wp-content\/uploads\/israel-palacio-y20jj_ddy9m-unsplash_2.webp\" alt=\"Sell your event tickets on your website - netzwerk.design\" srcset=\"https:\/\/netzwerk.design\/wp-content\/uploads\/israel-palacio-y20jj_ddy9m-unsplash_2.webp 1200w, https:\/\/netzwerk.design\/wp-content\/uploads\/israel-palacio-y20jj_ddy9m-unsplash_2-600x400.webp 600w, https:\/\/netzwerk.design\/wp-content\/uploads\/israel-palacio-y20jj_ddy9m-unsplash_2-200x133.webp 200w, https:\/\/netzwerk.design\/wp-content\/uploads\/israel-palacio-y20jj_ddy9m-unsplash_2-768x512.webp 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/>\n\n\n\n<figcaption class=\"gb-text gb-text-36f7edf6\">Photo | Israel Palacio on Unsplash<\/figcaption>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-element-7e7744af  alignfull\">\n<div class=\"gb-element-3fe8e2a3\">\n<div class=\"gb-element-7952ff28\">\n<div>\n<figure class=\"gb-element-926fcdf2\">\n<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"800\" class=\"gb-media-7b9cebd1\" src=\"https:\/\/netzwerk.design\/wp-content\/uploads\/drew-dizzy-graham-pvyhz0wmhdo-unsplash.webp\" alt=\"Fast and flexible - Theme selection for your WordPress website - netzwerk.design\" srcset=\"https:\/\/netzwerk.design\/wp-content\/uploads\/drew-dizzy-graham-pvyhz0wmhdo-unsplash.webp 1200w, https:\/\/netzwerk.design\/wp-content\/uploads\/drew-dizzy-graham-pvyhz0wmhdo-unsplash-600x400.webp 600w, https:\/\/netzwerk.design\/wp-content\/uploads\/drew-dizzy-graham-pvyhz0wmhdo-unsplash-200x133.webp 200w, https:\/\/netzwerk.design\/wp-content\/uploads\/drew-dizzy-graham-pvyhz0wmhdo-unsplash-768x512.webp 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/>\n\n\n\n<figcaption class=\"gb-text gb-text-6566ae3b\">Drew Dizzy Graham on Unsplash<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<div>\n<h2 id=\"magazinlook-wir-entwickeln-individuelle-blockvorlagen-fur-sie\" class=\"gb-text gb-text-429acc6c\">Magazine look - we develop customised block templates for you<\/h2>\n\n\n\n<p class=\"gb-text\">Give your content space to make an impact. With our predefined block templates, you can create appealing layouts, e.g. with a magazine look. And if you have a special layout and design requirement, we will be happy to create a customised block template for you that you can use for your content indefinitely.<\/p>\n\n\n\n<a class=\"gb-text button-border\" href=\"\/en\/contact\/\">Get in touch with us<\/a>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-element-cbf8fd13  alignfull\">\n<div class=\"gb-element-12c366f6\">\n<div class=\"gb-element-6068d908\">\n<div class=\"gb-element-5195f0eb\">\n<h2 id=\"bilder-fur-ihre-website\" class=\"gb-text gb-text-b3001e88\">Images for your website<\/h2>\n\n\n\n<p class=\"gb-text\">Good images evoke emotions in the viewer in a fraction of a second. That's why, together with the design, they determine the impact and persuasiveness of your website.<\/p>\n\n\n\n<p class=\"gb-text\">It is important to use optimised images on websites. Read our blog article to find out how to edit your images before uploading them to your WordPress media centre so that they don't slow down loading times.<\/p>\n\n\n\n<a class=\"gb-text button-border\" href=\"https:\/\/netzwerk.design\/en\/blog\/edit-images-before-uploading-to-wordpress\/\">Image editing for websites<\/a>\n<\/div>\n\n\n\n<div>\n<figure class=\"gb-element-3d73e7f6\">\n<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"800\" class=\"gb-media-ae2ca74f\" src=\"https:\/\/netzwerk.design\/wp-content\/uploads\/eduardo-gorghetto-jsu4t2c0r6s-unsplash_1200.webp\" alt=\"Image editing before uploading to WordPress - netzwerk.design\" srcset=\"https:\/\/netzwerk.design\/wp-content\/uploads\/eduardo-gorghetto-jsu4t2c0r6s-unsplash_1200.webp 1200w, https:\/\/netzwerk.design\/wp-content\/uploads\/eduardo-gorghetto-jsu4t2c0r6s-unsplash_1200-600x400.webp 600w, https:\/\/netzwerk.design\/wp-content\/uploads\/eduardo-gorghetto-jsu4t2c0r6s-unsplash_1200-200x133.webp 200w, https:\/\/netzwerk.design\/wp-content\/uploads\/eduardo-gorghetto-jsu4t2c0r6s-unsplash_1200-768x512.webp 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/>\n\n\n\n<figcaption class=\"gb-text gb-text-5a926978\">Photo | Eduardo Gorghetto on Unsplash<\/figcaption>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-element-0c9cde06  alignfull\">\n<div class=\"gb-element-92b0c626\">\n<div class=\"gb-element-673dceb1\">\n<div>\n<figure class=\"gb-element-181795a9\">\n<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"800\" class=\"gb-media-b1a07648\" src=\"https:\/\/netzwerk.design\/wp-content\/uploads\/charlesdeluvio-lks7vei-eag-unsplash_1200.webp\" alt=\"Do you use your website for your marketing? - network.design\" srcset=\"https:\/\/netzwerk.design\/wp-content\/uploads\/charlesdeluvio-lks7vei-eag-unsplash_1200.webp 1200w, https:\/\/netzwerk.design\/wp-content\/uploads\/charlesdeluvio-lks7vei-eag-unsplash_1200-600x400.webp 600w, https:\/\/netzwerk.design\/wp-content\/uploads\/charlesdeluvio-lks7vei-eag-unsplash_1200-200x133.webp 200w, https:\/\/netzwerk.design\/wp-content\/uploads\/charlesdeluvio-lks7vei-eag-unsplash_1200-768x512.webp 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/>\n\n\n\n<figcaption class=\"gb-text gb-text-11fcc49b\">Photo | Charles Deluvio on Unsplash<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<div>\n<h2 id=\"vektorgrafiken-immer-knackscharf\" class=\"gb-text gb-text-a859fb4b\">Vector graphics - always crisp<\/h2>\n\n\n\n<p class=\"gb-text\">We integrate all graphics such as logos, control elements, symbols and icons as vector graphics. These offer the great advantage that they are always displayed razor-sharp, no matter how small or large we scale them on your website. <\/p>\n\n\n\n<p class=\"gb-text\">If you would like to find out more about vector graphics, read our blog post on our agency website netzwerk.design:<\/p>\n\n\n\n<a class=\"gb-text button-border\" href=\"https:\/\/netzwerk.design\/en\/blog\/vector-graphics-on-websites\/\">About vector graphics<\/a>\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Photo | Claus Pescha SIDEMENU - The revival SIDEMENU is our revival of the classic website layout from the 90s: menu on the left, content on the right, only here in a modern and fully responsive implementation. SIDEMENU automatically adapts to any screen size, scales the content and reorganises it for intuitive operation. On tablet and mobile ... <a title=\"Demo side menu\" class=\"read-more\" href=\"https:\/\/netzwerk.design\/en\/demo-sidemenu\/\" aria-label=\"Read more about Demo Sidemenu\">Read more<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_titles_title":"%%post_title%% %%sep%% %%sitetitle%%","_seopress_titles_desc":"SIDEMENU - das Revival und vollst\u00e4ndig responsive. Wenn schnelle Navigation entscheidend ist, kann SIDEMENU den entscheidenden Punkt machen.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"_nd_vani_enabled":false,"footnotes":""},"class_list":["post-130280","page","type-page","status-publish","infinite-scroll-item"],"acf":[],"_links":{"self":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/pages\/130280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/comments?post=130280"}],"version-history":[{"count":0,"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/pages\/130280\/revisions"}],"wp:attachment":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/media?parent=130280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}