Menü ändern Desktop und Mobile

jonny · 09.01.2017 18:15:06

Hallo leibe Leute smile

Ich habe soeben meine Homepage endlich auf den WBCE aufgestockt und will nun weiter machen mit der Veränderung und Anpassung.

Denn das Template sobresot, ist zwar zu 99% für mich perfekt geeignet was ich jedoch gerne ändern würde ist das Menü bzw die Menüleiste desktop und Mobile. Beim Desktop nur uptische Veränderung und im Mobile mehrere dinge.

Einerseits kommt bei mir statt Menü angezeigt Men? im Mobile modus, andererseits kann ich das menü nicht wieder schliessen beim Tippen auf eine leere fläche oder einfach "abseits" des Menüs zum zucklappen. Das zuklappen fällt leider bei diesem Komplett weg.

Anstatt des Menü textes würde ich ausserdem gerne nur ein Symbol haben.

Soweit so gut. Ich habe mich etwas schlau gemacht und habe zwar Möglichkeiten entdeckt, scheitert aber nun an der korrekten Implementierung in das sobresot. Auf der Site: Smartmenu.(ihrwisstschon) habe ich nun die möglicheit gefunden, ein Menü vom gleichen Anbeiter wie Sobresot zu implementieren das mir auch gefallen würde.

Wie kann ich das Menüband so entfernen und ersetzen das es optisch und funktionell passt?

Liebe Grüsse

Jonny wink

florian · 09.01.2017 18:39:56

Hallo und willkommen,

in dem Template ist smartmenus schon drin. Auf
https://www.smartmenus.org/docs/#small-screen-support
ist ein Tutorial, wie man den Hamburger-Icon und die Öffnen/Schließen-Geschichten einbaut. ist aber etwas tricky.
In dem Template Weh Be Zeh Eh ist das so umgesetzt:
http://wbce.at/tpls/template-webezeheh.html

Evtl. musst Du die smartmenus.min.js tauschen, die Version bei Sobresot ist die 0.9.4 und bei Weh Be Zeh Eh die 1.0 . Da hatte sich zwischenzeitlich noch einiges geändert. Das betrifft aber mMn nur die Menüfunktion und nicht die Darstellung.

Ach so, Du kannst hier jetzt auch Links posten.

jonny · 09.01.2017 20:15:32

florian schrieb:

Hallo und willkommen,
in dem Template ist smartmenus schon drin. Auf
https://www.smartmenus.org/docs/#small-screen-support
ist ein Tutorial, wie man den Hamburger-Icon und die Öffnen/Schließen-Geschichten einbaut. ist aber etwas tricky.
In dem Template Weh Be Zeh Eh ist das so umgesetzt:
http://wbce.at/tpls/template-webezeheh.html
Evtl. musst Du die smartmenus.min.js tauschen, die Version bei Sobresot ist die 0.9.4 und bei Weh Be Zeh Eh die 1.0 . Da hatte sich zwischenzeitlich noch einiges geändert. Das betrifft aber mMn nur die Menüfunktion und nicht die Darstellung.
Ach so, Du kannst hier jetzt auch Links posten.

Wie sieht es denn aus, wenn ich ein neues smartmenus mit anderem Design möchte, was muss ich dafür machen das es so schonend wie möglich ersetzt wird?

Was muss ich bei den index.php zum Beispiel dann anpassen?

grindmobil · 09.01.2017 21:18:31

In der praxis ist es einfacher, das templates umzubauen, als das Menü. Anders gesagt: es ist leichter, werbeezeeeh so zu ändern, dass es wie sobresot aussieht, als das Menü von sobresot zu ändern.

florian · 10.01.2017 10:58:42

Also, das "Men?" ist ein Codierungsproblem. Du kannst entweder "Menü" statt "Menü" an der bewussten Stelle einfügen oder die index.php z.B. mit Notepad++ öffnen, dort "Kodierung > Konvertiere zu UTF-8 ohne BOM" wählen und die Datei speichern, dann klappts auch mit dem ü.

Wenn Du da dieses Hamburger-Icon haben willst (die drei Striche übereinander), kannst Du folgendermaßen vorgehen:
1) Füge im Template nach der Zeile

<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/jscss/style.css"  />

noch ein:

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"  />

2) Ersetze das Wort "Menü" durch

<i class="fa fa-bars" aria-hidden="true"></i>

Die Funktion, irgendwohin zu klicken, um das Menü verschwinden zu lassen, gibt es nicht. Du kannst aber in der /templates/sobresot/menu.js Zeile 16 und 19 auskommentieren, also so:

function showmenu() {
	mm = document.getElementById("topmenu").style.display;	
	if ( mm == 'block') {
		document.getElementById("topmenu").style.display = 'none';
		//document.getElementById("mobilemenu").style.display = 'block';
	} else {	
		document.getElementById("topmenu").style.display = 'block';
		//document.getElementById("mobilemenu").style.display = 'none';
	}
}

Dann bleibt die Zeile mit "Menü" immer sichtbar und durch Anklicken des selbigen kannst Du es auf- und zuklappen.

Weitere Änderungen an Farbe und Schriften der Menüzeile kannst Du in der style.css des Templates ab Zeile 114 vornehmen. Da müsste man etwas genauer wissen, was genau zu ändern ist.

Beitrag geändert von florian (10.01.2017 10:59:06)

jonny · 16.01.2017 12:27:55

In Ordnung das hat nun bestens geklappt. Die Funktion das mein Menü bei Berührung oder scrollen zuklappt habe ich aber bereits gesehen bei anderen sites, kann das daran liegen welches Menü verwendet wird?

Ausserdem wenn mann anschaut bei meiner Page "schletzt" das Menü regelrecht auf bei wbce.org gleitet es etwas.

Optisch würde mir besser gefallen, wenn man wie bei wbce die plus buttons rechts etwas grösser hat und oben das "X" anstelle des "sandwich"

Sorry leute bin wirklich damit nicht erfahren genug um dies so zu modifizieren. Aber kann ja jetzt lernen von euch smile

florian · 16.01.2017 13:04:42

Die Funktion das mein Menü bei Berührung oder scrollen zuklappt habe ich aber bereits gesehen bei anderen sites, kann das daran liegen welches Menü verwendet wird?

Ja. Ich hätte mich etwas genauer ausdrücken sollen: smartmenus unterstützt diese Funktion (meines Wissens) nicht.

Ausserdem wenn mann anschaut bei meiner Page "schletzt" das Menü regelrecht auf bei wbce.org gleitet es etwas.
Optisch würde mir besser gefallen, wenn man wie bei wbce die plus buttons rechts etwas grösser hat und oben das "X" anstelle des "sandwich"

Zum Schletzen und den Buttons:

1. Ersetze in der script.js den gesamten Absatz, der mit function showmenu() beginnt und mit der letzten Klammer } vor function menuremove aufhört, durch

function showmenu() {
	mm = document.getElementById("topmenu").style.display;	
	if ( mm == 'block') {
		  $( "#topmenu" ).slideUp( "slow", function() {	});
		  document.getElementById("menushow").style.display = 'block';
		  document.getElementById("menuclose").style.display = 'none';
	} else {	
		$( "#topmenu" ).slideDown( "slow", function() {	});
		document.getElementById("menushow").style.display = 'none';
		document.getElementById("menuclose").style.display = 'block';
		
	}
}

2. Ändere in der index.php die Zeile

<a aria-hidden="true" id="mobilemenu" href="javascript:showmenu();"><span><i class="fa fa-bars" aria-hidden="true"></i></span></a>

zu

<a aria-hidden="true" id="mobilemenu" href="javascript:showmenu();"><span id="menushow"><i class="fa fa-bars" aria-hidden="true"></i></span><span id="menuclose"><i class="fa fa-times" aria-hidden="true"></i></span></a>

3. Ändere in der style.css die Zeile

a#mobilemenu span {display:block; padding: 10px 15px ; font-weight: bold;}

zu

a#mobilemenu span#menushow {display:block; padding: 10px 15px ; font-weight: bold;}

span#menuclose {display:none; padding: 10px 15px ; font-weight: bold;}

4. Ändere in der sm-clean.css den Block ab Zeile 286

	.sm-clean a span.sub-arrow,
	.sm-clean ul a span.sub-arrow {
		top:50%;
		margin-top:-9px;
		right:auto;
		left:6px;
		margin-left:0;
		width:17px;
		height:17px;
		font:normal 16px/16px monospace !important;
		text-align:center;
		border:0;
		text-shadow:none;
		background:rgba(255,255,255,0.6);
		-moz-border-radius:50px;
		-webkit-border-radius:50px;
		border-radius:50px;
	}

zu

	.sm-clean a span.sub-arrow,
	.sm-clean ul a span.sub-arrow {
		top:50%;
		margin-top:-12px;
		right:6px;
		margin-left:0;
		width:22px;
		height:22px;
		font:normal 20px/22px monospace !important;
		text-align:center;
		border:0;
		text-shadow:none;
		background:rgba(255,255,255,0.6);
	}

nailstylistin08

jonny · 16.01.2017 14:09:17

Florian du bist ein angel ich danke dir für deine Geduld mit meinen etwas sehr nervenaufreibenden Fragen big_smile

Ich danke dir das es nun endlich genauso ist wie ich es mir gewünscht habe.

Bei einer anderen seite, habe ich den Wunsch eventuell ein anderes Menü einzubauen geht das überhaupt und welche alternativen zu smartmenus gibt es?

LG

florian · 16.01.2017 14:21:22

Bei einer anderen seite, habe ich den Wunsch eventuell ein anderes Menü einzubauen geht das überhaupt und welche alternativen zu smartmenus gibt es?

Grundsätzlich geht das bestimmt. Kommt halt immer darauf an, wie komplex die Seite ist, also sowohl was das Template angeht - je aufwändiger das programmiert ist, desto schwieriger ist es, da ein anderes Menü reinzufrickeln -, als auch in Punkto Inhalte, d.h. es macht einen Unterschied, ob eine Navigation nur 10 Seiten auf zwei Ebenen abbilden können muss oder es um 500 Seiten in verschiedenen Sprachen auf 5 Ebenen geht.

Navigationen gibt es wie Sand am Meer, für umme und kommerziell. Einiges findet man z.B. hier: http://www.dynamicdrive.com/style/
Ansonsten einfach googeln.

jonny · 18.01.2017 00:38:11

Gibt es die Möglichkeit auf der Desktop Seite das schletzen auch zu smoothen? big_smile

florian · 18.01.2017 08:49:33

Nein, dafür müsste das Menü komplett neu implementiert werden.

jonny · 18.01.2017 10:06:52

und das ist ja meines wissens nach Zuviel Arbeit Dankeschön trotzdem smile

Edit in /jscss/jquery.smartmenus.js

[== CSS ==]
		showDuration:		500,		// duration for show animation - set to 0 for no animation - matters only if showFunction:null
		showFunction:		null,		// custom function to use when showing a sub menu (the default is the jQuery 'show')
							// don't forget to call complete() at the end of whatever you do
							// e.g.: function($ul, complete) { $ul.fadeIn(250, complete); }
		hideDuration:		250,		// duration for hide animation - set to 0 for no animation - matters only if hideFunction:null
		hideFunction:		function($ul, complete) { $ul.fadeOut(200, complete); },	// custom function to use when hiding a sub menu (the default is the jQuery 'hide')

show duration auf zb 500, hide duration auf 250 dann wird's etwas sanfter big_smile

Beitrag geändert von jonny (18.01.2017 10:29:43)

florian · 18.01.2017 10:09:03

Hör mal, nicht so, ja?!
Wenn Du ein Template mit Extralocken haben willst - da.
https://forum.wbce.org/viewforum.php?id=42

jonny · 18.01.2017 10:31:35

florian schrieb:

Hör mal, nicht so, ja?!

Warte, das war nicht böse gemeint sad

Ich habe nur gehört das es eben wirklich sehr viel Arbeit gibt da ein Menü reinzufrickeln sorryyyy sad

Habs nun selbst rausgefunden, siehe oben

Beitrag geändert von jonny (18.01.2017 10:33:28)

florian · 18.01.2017 10:43:38

Entschuldigung, mein Fehler. Die Möglichkeit, die Du gefunden hast, war mir nicht bekannt.
Ich hatte versucht, das Menüscript auf 1.0.1 zu aktualisieren, da ist nämlich eine Möglichkeit gegeben, die Menüs zu animieren, das hatte aber in Sobresot nicht funktioniert.

jonny · 18.01.2017 13:01:07

Kein problem, das kann passieren schliesslich sind wir nur Menschen smile

Woran kann den das liegen das die Animation nicht funktioniert?

Lg

Jonny

jonny · 17.02.2017 12:04:53

Hey ich habe noch eine kleine Frage zu meinem Mobilen Menü, Wenn ich die Seite mit + öffne, lässt sich diese nicht mehr schliessen da das + verschwindet.

Liesse sich dort ein "-" einbauen, welches ds sub-menü wieder schliesst?

WBCE CMS Forum

#1 09.01.2017 18:15:06

Menü ändern Desktop und Mobile

#2 09.01.2017 18:39:56

Re: Menü ändern Desktop und Mobile

#3 09.01.2017 20:15:32

Re: Menü ändern Desktop und Mobile

#4 09.01.2017 21:18:31

Re: Menü ändern Desktop und Mobile

#5 10.01.2017 10:58:42

Re: Menü ändern Desktop und Mobile

#6 16.01.2017 12:27:55

Re: Menü ändern Desktop und Mobile

#7 16.01.2017 13:04:42

Re: Menü ändern Desktop und Mobile

#8 16.01.2017 14:09:17

Re: Menü ändern Desktop und Mobile

#9 16.01.2017 14:21:22

Re: Menü ändern Desktop und Mobile

#10 18.01.2017 00:38:11

Re: Menü ändern Desktop und Mobile

#11 18.01.2017 08:49:33

Re: Menü ändern Desktop und Mobile

#12 18.01.2017 10:06:52

Re: Menü ändern Desktop und Mobile

#13 18.01.2017 10:09:03

Re: Menü ändern Desktop und Mobile

#14 18.01.2017 10:31:35

Re: Menü ändern Desktop und Mobile

#15 18.01.2017 10:43:38

Re: Menü ändern Desktop und Mobile

#16 18.01.2017 13:01:07

Re: Menü ändern Desktop und Mobile

#17 17.02.2017 12:04:53

Re: Menü ändern Desktop und Mobile

Fußzeile des Forums