nicht angemeldet
Bestehendes Menü in Hamburger (responsive) Menü umwandeln
Rolf B
Gunnar BittersmannHallo ich möchte gerne das Menü in ein dauerhaftes responsive Menü umwandeln. Also sodass immer das Hamburger Symbol sichtbar ist und auf klick meine Menüpunkte dargestellt werden. Was muss ich tun damit dies direkt auf dem Desktop als auch tablet und Smartphone egal welche Auflösung dargstellt wird?
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<body class="centered-wrapper">
<div class="centered-content"></div>
</body>
<div id="wrapper">
<div class="row kopfzeile">
<div class="col-md-4">
{if $CMSLOGO_SHOW}
{if $CMSLOGO_LINK}
<a href="{$CMSLOGO_URL}"><img class="cmslogo img-responsive img-thumbnail" src="{$SiteBaseURL}{$CMSLOGO_BILD}" alt="{$CMSLOGO_ALT}" title="{$CMSLOGO_ALT}" /></a>
{else}
<img src="{$SiteBaseURL}{$CMSLOGO_BILD}" alt="{$CMSLOGO_ALT}" title="{$CMSLOGO_ALT}" />
{/if}
{/if}
</div>
<div class="col-md-6">
{if $SITE_HEADLINE}<h2>{$SITE_HEADLINE}</h2>{/if}
{if $SITE_SUB_HEADLINE}<h5>{$SITE_SUB_HEADLINE}</h5>{/if}
</div>
<div class="col-md-2">
{if $Sprachen}
<form id="Sprachform" name="Sprachwahl" method="post" action="">
{foreach name=aussen item=Icon from=$Sprachen}
<button type="submit" name="Sprache" value="{$Icon.ID}"><span><img src="{$TemplateBase}/bilder/{$Icon.Icon}" alt="{$Icon.Name}" title="{$Icon.Name}" /></span></button>
{/foreach}
</form>
{/if}
</div>
</div><!--End Kopfzeile-->
<div class="row hr1"> </div>
<div class="row navigation">
<div class="col-md-12">
<nav class="navbar navbar-default">
<div class="container-fluid">
{if $TopBoxen}{$TopBoxen}{/if}
</div>
<div class="nav navbar-nav navbar-right">
<form id="suchform" class="form-inline" method="post" action="">
<div class="form-group">
<input size="auto" type="text" class="form-control" id="Suchwort" name="Suchwort" placeholder="Suchbegriff hier eingeben">
</div>
<button class="btn btn-default" name="Finden" value="Finden">[[typ="translate" code="button_finden"]]</button>
</form>
</div>
</nav>
</div>
</div><!--End Navigation-->
<div class="row hr"> </div>
<div class="row content">
<div class="col-md-8">
{if $Messagebox}{$Messagebox}{/if}
{if $Headline}<h1>{$Headline}</h1>{/if}
{if $Slider}
{/if}
{if $Content}{$Content}{/if}
{if $Formular}{$Formular}{/if}
{if $Bildergalerie}{$Bildergalerie}{/if}
</div>
<div class="col-md-4">
{if $LinkeBoxen}{$LinkeBoxen}{/if}
{if $RechteBoxen}{$RechteBoxen}{/if}
{if $ContentBild}<img class="img-responsive img-thumbnail" src="{$SiteBaseURL}medien/contentbody/{$ContentBild}" alt="{$ContentBildAlt}" title="{$ContentBildAlt}" />{/if}
</div>
</div><!--End Content-->
<div class="row fusszeile">
<div class="col-md-3 bottombox">
<p>© {$Copyright} | {if $FooterLinks}{$FooterLinks}{/if} </p>
</div>
<div class="col-md-3 footerlinks">
</div>
</div><!--End Footer-->
</div><!--End Wrapper-->
{if $Slider}
{$SliderScript}
{/if}
@font-face {
font-family: 'Conv_FiraSansOT-Regular';
src: url('fonts/FiraSansOT-Regular.eot');
src: local('☺'), url('../fonts/FiraSansOT-Regular.woff') format('woff'), url('../fonts/FiraSansOT-Regular.ttf') format('truetype'), url('../fonts/FiraSansOT-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
html {
background-color: #ebe7dc;
display:table; width:100%;
}
body {
font: normal 14px 'Conv_FiraSansOT-Regular','Conv_FiraSansOT-RegularItalic','Conv_FiraSansOT-Bold','Conv_FiraSansOT-BoldItalic', arial, verdana, tahoma, geneva, sans-serif;
line-height: 160%;
max-height:auto;
display: table-cell;
vertical-align: middle;
text-align:center;
color: #333;
background: url(../bilder/hg-justizia-djft.jpg) no-repeat center top;
background-color:#ebe7dc;
margin: 0 auto;
overflow-y: scroll;
}
.centered-wrapper {
position: relative;
text-align: center;
margin: 0 auto;
}
.centered-wrapper:before {
content: "";
position: relative;
display: inline-block;
width: 100%; height: 100%;
vertical-align: middle;
margin: 0 auto;
}
.centered-content {
display: inline-block;
vertical-align: middle;
margin: 0 auto;
}
#wrapper {
width:100%;
margin: 0 auto;
}
.two-col-left, .two-col-right {
margin-top: 15px;
}
.col-sidebar ul, .col-sidebar ol {
margin-left: 10px;
}
.kopfzeile {
background-color: #cac3a2 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
margin-top: 0px;
max-width: 1100px;
margin: 0 auto;
}
.hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right,
rgb(255,255,255),
rgb(153,0,0),
rgb(255,255,255));
max-width: 1100px;
margin: 0 auto;
}
.hr1{
border-top: 1px solid #990000;
max-width: 1100px;
margin: 0 auto;
}
.navigation {
padding-top:15px;
background: rgba(0, 0, 0, 0) url("../bilder/hg-inhalt.png") repeat scroll left top;
min-height:50px;
max-width: 1100px;
margin: 0 auto;
}
.content {
min-height: 750px;
max-width:1100px;
background: rgba(0, 0, 0, 0) url("../bilder/hg-inhalt.png") repeat scroll left top;
padding-top: 10px;
padding-right: 0px;
margin: 0 auto;
}
.fusszeile {
min-height:40px;
max-width: 1100px;
background-image: linear-gradient(to bottom, #dbdbdb 0px, #cac3a2 100%);
background-repeat: repeat-x;
padding-top: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin: 0 auto;
}
-
Hallo atom13,
zuerst mal solltest Du dein HTML sanieren. Nach </body> sollte maximal noch </html> kommen, bei Dir kommt da der Rest der Seite.
Es wäre auch hilfreich, einige div durch semantischere Tags zu ersetzen, z.B. <header> statt
<div class="kopfzeile">,<nav>statt<div class="navigation">,<main>statt<div class="content">,<footer>statt<div class="fusszeile">, dann brauchst Du keine Kommentare wie <!--End Kopfzeile-->, sondern die Tags dokumentieren sich selbst. Deine Bootstrap-row kannst Du immer noch dranhängen.Das Gerücht, dass in einen <body> ein wrapper-div gehört, hält sich hartnäckig. Normalerweise ist das keine Kunst, sondern kann weg. Und in deinem Fall, wo der Wrapper auf width:100% und margin:0 auto gestyled ist, kann der definitiv weg. Das ist eine Hülle ohne Funktion.
Wenn Du ein Menü haben willst - ja, hm, wo isses denn? Deine Navigation besteht nur aus einem Suchfeld. Bootstrap hat übrigens auch eine navbar im Angebot - ich habe da keine Ahnung von aber hast Du Dir das schon mal angeschaut?
Rolf
--
sumpsi - posui - clusi-
Ich habe das leider nicht erstellt, es ist ein template eiens merkwürdigen CMS.
Ich dachte das Menü verbirgt sich hier hinter:
<div class="row navigation"> <div class="col-md-12"> <nav class="navbar navbar-default"> <div class="container-fluid"> {if $TopBoxen}{$TopBoxen}{/if} </div> </nav> </div>-
Hallo atom13,
das mag sein, aber ich bin kein Boxer und kann daher auch nicht Topboxen 😉
Das Template sieht nach Smarty aus. Das eigentliche Menü - wenn Du recht hast mit deiner Annahme - steckt in der $TopBoxen Variablen. Die Frage ist natürlich, woher diese ihren Inhalt bekommt.
Ohne Kenntnis des erzeugten HTML kann man wenig sagen. Ein Universalrezept gibt es nicht. Ist die Seite irgendwo online?
Rolf
--
sumpsi - posui - clusi-
ja ist sie djft.de
ich glaube fast ich bastel das Ding in einem Wordpress so halb nach aber eben moderner. Habe das gefühl es gibt zu viele Kleinigkeiten die erst noch mühselig definiert werden müssen um es schick udn resposnive zu halten. Und hinzu kommt niemand kennt dieses CMS System weil es irgend etwas selbst gebautes ist.
Bin aber für Hinweise dankbar.
P.s. vom Entwickler dieses CMS erhielt ich folgende Nachricht:
Das Menü wird als Content Box in die Seite geladen, in der Content Box können Sie dann ein eigenes HTML Template für die Box und das Menü auswählen. Alle Einträge und deren Reihenfolge die Sie in der Navigation sehen kommen aus den Einträgen der Navigationspunkte. Hier können Sie eigene Navigationslisten erstellen und diese dann in Ihrer Navigation einbinden. Die dafür verwendeten Templates sind in der Order boxen zu finden. Ein Beispiel hierfür ist die mainnavigation.html die sich dynamisch an bis zu 3 Ebenen anpasst. Alle CSS Definitionen hierfür werden auch in der style.css gemacht.
-
Hallo atom13,
grundsätzlich ist das Menü ja responsive. Es bricht um, wenn der Bildschirm schmaler wird, und ab einem gewissen Punkt (768px) wird es vertikal angeordnet. Einen Hamburger-Button hinzuzufügen ist sicherlich möglich, die Herausforderung ist aber, wie man das in easyCMS so hineinbekommt dass es durch Ändern der Inhalte nicht kaputt geht. Dazu muss man das CMS etwas intimer kennen.
Was Herr Brosius da schreibt, ist ohne Kenntnis der Autorensicht der Seite (sprich: Blick auf den Server und die Dateien, die da liegen) schwer verständlich. Aber so, wie ich seine Anbieterseite verstehe, will er ja ein Angebot für Leute machen die kein HTML/CSS können. Da gibt's dann eben bestimmte Schemata, an die sich das System hält.
Ein Nachbau in Wordpress ist nicht zu unterschätzen. Ich habe es noch nie benutzt, aber ich denke, da steckt eine ordentliche Lernkurve drin.
Rolf
--
sumpsi - posui - clusi-
Hab Dank für deine Tipps.
Habe eine Frage, oft sehe ich das das Hamburger Menü dann nur ausgeklappt wird wenn man drauf klickt.
Hast du eine Idee wo ich entsprechende Tutorial o.ä. (entsprechenden Code) finde wie man das menü dann über die gesamte Bildschirmfläche anzeigen lassen kann.
Ein Beispiel wäre diese Website: https://medizinische-fakultaeten.de/
-
@@atom13
Ein Beispiel wäre diese Website: https://medizinische-fakultaeten.de/
Ein Musterbeispiel für schlechtes Design. Es gibt überhaupt keinen Grund, das Menü nicht gleich anzuzeigen.
Die Frage sollte hier nicht sein: Wie verstecke ich mein Menü auch bei großen Viewports (Desktop)? Sondern: Wie zeigen ich mein Menü auch auch kleinen Viewports an, ohne es hinter einem Hamburger-Icon zu verstecken?
LLAP 🖖
PS: Verweise zu anderen Seiten bitte auch verlinken! (🔗-Button überm Eingabefeld oder in der Hilfe nachlesen) Ich hab das mal für dich korrigiert.
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
-
-
-
-