WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 21.02.2017 10:59:55

berny
Mitglied

scachgar - kein mobile Menü

Hallo Leute
Ich habe das scachgar Template bei der WECE 1.1.11 im Einsatz, jedoch zeigt es kein responsive Menü an. (Das Hamburger-icon ist da, aber es passiert nichts beim draufklicken)

Auffällig ist, dass vermutlich der <?php echo $topmenu;?> Aufruf an der richtigen Stelle fehlt.
Nur wo genau plaziere ich den jetzt?

bzw ich habe es soweit geschafft, dass das Menü angezeigt wird, aber leider immer, also nicht ausgeblendet wird.

Beitrag geändert von berny (21.02.2017 11:00:53)

Offline

#2 21.02.2017 11:33:45

florian
Administrator

Re: scachgar - kein mobile Menü

Glaube eher nicht, dass <?php echo $topmenu;?> fehlt.
Ergänz mal in der standard.js nach

var scrollTopNow = -1;

noch

var ww=0;

Dann sollte es gehen.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 21.02.2017 11:42:10

berny
Mitglied

Re: scachgar - kein mobile Menü

OK, thx, das wars!
Danke!!!

Offline

Liked by:

florian

#4 22.02.2017 11:37:36

berny
Mitglied

Re: scachgar - kein mobile Menü

Jetzt habe ich noch ein Problemchen:

Wenn ich ein Menü mit Untermenü aufmache (also hover) erscheint zwar das Untermenü, aber sobald ich mit der Maus das Menü verlasse, verschwindet auch dass Untermenü.
Da das Untermenü immer links vom kompletten Block angesetzt ist, habe ich keine Chance, auf das Untermenü zu klicken.

Das gleiche ist bei den weiteren Untermenüs.

Wie kann ich das ändern, dass das Menü einfach unterhalb des oberen Menü erscheint, ev sogar untereinander.
Oder dass das Menü stehen bleibt, auch wenn ich den eigentlichen Menüpunkt mit der Maus verlasse.

Offline

#5 22.02.2017 12:19:54

grindbatzn
Gast

Re: scachgar - kein mobile Menü

Woher die lustigen Template-Namen kommen:
http://www.schachinger.at/

Da steht im CSS:
/*Ausnahmen Unternehmen*/
#nav ul li.liid22:hover ul{left: 300px;}

Scachgar ist nicht ganz so einfach, aber eben mal was anderes.

#6 22.02.2017 12:45:47

berny
Mitglied

Re: scachgar - kein mobile Menü

Hmm
Das wäre jetzt mal ok, jedoch wie schaffe ich es, dass ich das automatisiere....

ich müsste ja sonst für jeden Menüpunkt extra die Ausnahmen schreiben....

Übrigens, ich finde das Template überaus  cool

Offline

#7 22.02.2017 12:47:16

florian
Administrator

Re: scachgar - kein mobile Menü

Automatisieren lässt sich das nicht, aber ändert sich denn so viel an der Struktur?
Konkret bedeutet das Ausnahmen definieren ja nur, dass die jeweiligen Untermenüs über die Klasse lii+Page-ID der Elternseite und die Anweisung "left" an die richtige Stelle geschoben werden müssen (oder es genug untergeordnete Einträge geben muss, damit die Leiste lang genug wird).


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#8 22.02.2017 13:08:37

berny
Mitglied

Re: scachgar - kein mobile Menü

ok...
Ich warte mal auf die Gesamtstruktur, dann passen wir an.

thx

Offline

#9 22.02.2017 13:35:18

berny
Mitglied

Re: scachgar - kein mobile Menü

So, habs jetzt ein wenig anders gelöst, also Denkansatz...

<ul class="mul[page_id]" style="width:100%;">

Damit wird das Untermenü einfach auf 100% in die Breite gezogen, und ich verlasse mit der Maus eben nicht das Menü.
Vielleicht gibts noch was, dass man einfach den restlichen Balken transparent macht, damit würde dann die Maus das Menü nicht verlassen, aber es schaut optisch gleich aus wie vorher....

Das funktioniert dann auch in allen weiteren Level.

weiters folgender Tag:

style="width:100%; background: #4d7091;"

Die Farbe ist die Hintergrundfarbe des Menüs.
Transparent bewirkt, dass die Schatten usw auch angezeigt werden, man müsste also diese irgendwie deaktivieren.
Inherit bewirkt, dass level 1 blau, level 2 hellgrau angezeigt werden.

Ev hat ja jemand eine Idee, wie man das optimieren könnte...

Beitrag geändert von berny (22.02.2017 13:46:18)

Offline

#10 22.02.2017 13:49:30

florian
Administrator

Re: scachgar - kein mobile Menü

Ich würde das nicht per style="" da reinverdrahten, weil das evtl. in der mobilen Ansicht stört.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#11 22.02.2017 13:51:16

berny
Mitglied

Re: scachgar - kein mobile Menü

ok, stimmt, wo gehört das dann genau hin? ops

Offline

#12 22.02.2017 13:55:04

florian
Administrator

Re: scachgar - kein mobile Menü

in die template.css


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#13 22.02.2017 13:58:45

berny
Mitglied

Re: scachgar - kein mobile Menü

jo, des woas i eh ;-)

Meinte, wo genau ...

Offline

#14 22.02.2017 14:01:15

florian
Administrator

Re: scachgar - kein mobile Menü

In der template.css gibt es die Abschnitte
/* Root Level Link Formatting */
und
/* 2nd Child menu */
so um Zz. 150-170 herum, da müsste es dann sinnvoll ergänzt werden.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#15 22.02.2017 14:19:19

berny
Mitglied

Re: scachgar - kein mobile Menü

thx...... bin am basteln big_smile

Offline

#16 04.06.2018 10:24:35

nickfake
Mitglied

Re: scachgar - kein mobile Menü

gibt das ein bugfix für templates?
ich glaube ich habe ein ähnliches Problem.

Mobil wird das Menü angezeigt aber funktioniert nach dem aufrufen einer Seite ( ab der 3. , keine untermenüs ) nicht mehr. Die Pfeile ( vor und Zurück ) verschwinden dann auch.

html, body { 	
	background: #d1d6de url(img/bodybg.jpg) repeat-x 0 0;
	margin: 0; padding: 0;
	height:100%;
	width:100%;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.wrapper { /* Holds the page items in place */
	box-shadow: 0px 20px 40px -20px rgba(0, 0, 0, 0.9);
	background:#fff;	
}
.wrapper, #topmenubox .m_inner { width: 90%; max-width: 1100px; margin: 0 auto 0 auto;}

.topspacer {padding-top: 140px; width:100%;}
#header_pic {width:100%; margin-bottom:20px;}


/*===========================================================
Contentbereich


/*====================================================
Bloecke
*/
.mainbox {width:96%; margin:0 2% 0 2%;}

.content {width: 60%; float: left; margin-left: 0;}
.sidebar {width: 37%;  float: right; }
/*.content p img , #leftbox p img  {max-width:100%; height:auto ! important; }*/


.mainbox .contentwide  {width:100%; margin:0 0 0 0;}

/* right innerhalb von .contentwide, geht auf mobiles nach oben*/
.mainbox .contentwide .contentwidenarrow  {width:100%;}



.clearcontent {height:60px; clear:both; }

.footerbox {height:80px; font-size:11px; color: #999; width: 100%; background: #fff;}
.footerbox .left {width: 25%; margin:0 0 0 0; float:left;}
.footerbox  .center {width: 50%; margin: 10px 0 0 0; float:left; text-align:center;}

#gototopswitch {float:right; margin: 10px 10px 0 0}







/* Top and Menu Box */
#topmenubox {width: 100%; height:120px; margin:0 0 0 0; position:fixed; z-index:900;  top:0; left:0%;  transition: 0.5s all;}
#topmenubox .m_inner {position:relative; height:100%; background: #fff; }
#topmenubox a.logo img {max-height:80%; max-width:100%; position: absolute; left: 2%; bottom:20%;}
#topmenubox.reduced {height:70px; transition: 0.5s all;}

/* Search Box in header */
li.search_box_li a {border: none ! important;}

.menuebox {width: 75%; height:100%; float:left; position:relative;} 
.toggleMenu {display:none;}
#openrightboxswitch, #closerightboxswitch{display:none;}

/* nav: see below */




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  
breadcrumbs vom design kaum moeglich
*/
.breadcrumbs {
	height:30px;
	line-height:100%;
	margin: 0 0 0 0;
	padding: 3px 0 3px 0;
	clear:both;	
}

.innerbc {
	font-size:14px;
	margin:10px 0 0 0%;
}

.breadcrumbs .innerbc span {
	background: transparent url(img/bclink.gif) no-repeat; 
	padding: 6px 2px 0px 12px; font-weight: normal; }
	
.breadcrumbs .innerbc a {
	padding:1px;
	border-bottom: 1px dotted #505567;
	text-decoration: none;
}
.breadcrumbs .innerbc a:hover {border-bottom: 1px solid #505567;}
	
.breadcrumbs .innerbc .menu-current a{
	color: #000000;
}


.frontpage .breadcrumbs {display:none;}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	####	Header Menu #####
	#######################

	Horizontal Drop-Down Menu based off :
	http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
	
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
#nav {
	position: absolute;
	right: 0;
	bottom:0;	
	border: 0;	
	padding:0;
}

#nav ul,  #nav2 ul {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
	width: auto;
	position: relative;
	z-index: 800;
	background: #ffffff;

}
#nav ul li,  #nav2 ul li {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}


/* Root Level Link Formatting */
#nav ul li {float: left; display:inline; color: #aaa; text-align: left; font-weight: normal; list-style-type: none; list-style-image: none ;}
#nav ul li a {display: block; font-size: 16px; border-right:1px #ddd solid; color: #666; text-decoration: none; background-repeat: no-repeat;}
#nav ul li a span {display:block; padding: 11px 12px 10px 12px; }
/* Root Level link hover */
#nav ul li a:hover, #nav li a:focus, #nav li a:active, #nav ul li a.active, #nav a.menu-current, #nav a.menu-parent {color: #fff; background: #00aeef ; }


/*Current page Customisations*/
#nav a.menu-current		{font-weight: bold;}



/* 2nd Child menu */
#nav  li ul {position: absolute; left:-10000px; top:40px ;width: 100%; opacity:0.0; text-transform: none; 	background: #ddd ; box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.4);}
#nav  li ul li {text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;  width:33%;}
#nav  li ul li a {height:auto; text-shadow: none; margin:0; padding: 0; color: #333; border-top: 1px solid #fff; font-weight: normal; font-size: 13px; background: none;}
#nav  li ul li a span {display:block; padding:8px; }


/* 2nd Child link hover */
#nav  li ul a:hover,  #nav  li ul a.menu-current { background-color: #cc0000;  text-shadow: 1px 2px 4px #000;}

/* Show and hide */
#nav  li:hover ul, #nav  li a:focus ul, #nav li.tabselected ul { left:0; margin: -3px 0 0 0; opacity:1; transition:0.5s opacity;}
#nav  li ul ul { margin-left: -10000px; opacity:0.0; transition:0.5s opacity;}
#nav  li:hover ul ul, #nav  li.subMenu ul ul { margin-left: -10000px; opacity:0.0; transition:0.5s opacity;}
#nav  li:hover>ul, #nav  li li:hover>ul { opacity:1; margin-left: 0;  transition:0.5s opacity; z-index: 1000;}


/*neu*/
#nav ul li {background:#4d7091; }
#nav ul li a {color:#fff; }
#nav ul li ul { border-right: 1px solid #ccc; }
#nav ul li ul, #nav ul li ul li  {background:#f1f1f1; border-bottom:none;}
#nav ul li ul li a {color:#000;     border: none;}

/*ohne*/
#nav ul li ul, #nav ul li ul li  {width:auto;   }
#nav ul li ul li a {width:auto; padding:3px; border-left: 1px solid #ccc;}
#nav ul li ul li a span {}



/* Better: */
#nav li:hover {
	z-index: 900;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}



/* end menu */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */



/* subnav */
#nav { bottom: 30px; }
#subnav{
    position: absolute;
    right: 0;
    bottom: 0;
    border: 0;
    padding: 0;
	height: 30px;
}




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Slider */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0 ;
  margin: 0 0 30px 0;
  }

.rslides, .rslides li {padding:0;	list-style:none; list-style-image:none;}

.rslides ul li {
	-webkit-backface-visibility: hidden;
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
	top: 0;	
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
}



/* Login Box */

#showlogin {display: block; margin: 20px 0 0 10px;}
#login-box { margin-top:0; padding-left:10px; font-size: 10px;}
#login-box .inputfield {		
	font-size: 10px;
	padding:2px;
	border: 1px solid #505567;
	background-color: #f2f3f8;
	width:100%;	
}
#login-box .loginsubmit { float:right;}


/* Search Box in header */

#search_box { position:absolute; padding:0 5px; width:138px; height:0px; right:0; top:0; background:#d1d6de; transition:1s all; overflow:hidden;}
#search_box.visible { height:22px;  padding:5px;}
.search_box .searchstring { width:70%; border: 1px solid #ddd; font-size:14px; padding:3px;}
.search_box .searchbutton { vertical-align: top; margin: 1px 0 0 5px; }


#aprevnext {display:block; width:90px; height:27px; position:absolute;  right:0; top:0;}
#aprevnext a {display:block; width:40px; height:27px; float:right; opacity:0; border:none;}
#aprevnext a.aprev {background: url(img/prev.png) no-repeat center top;  }
#aprevnext a.anext {background: url(img/next.png) no-repeat center top;  }
#aprevnext a:hover {opacity:0.8}
.frontpage #aprevnext a.aprev {display:none;}

	

.showonmobiles  {display:none;}





/* ====================================================================================================================
Responsive:
*/


@media screen and (min-width: 1025px) {
	
}


/*Smaller Screens */
@media screen and (max-width: 1240px) {
	.wrapper, #topmenubox .m_inner { width: 98%;}
}

/*Smaller Screens */
@media screen and (max-width: 1024px) {
	.wrapper,   #topmenubox .m_inner  {width:100%; margin: 0 0 0 0;}
	body {font-size: 14px;}
	
	.mainbox {width:96%; margin-left:2%; padding-top:30px;}

	
	
	
	#topmenubox {height: 60px ! important; box-shadow: 0px 20px 40px -20px rgba(0, 0, 0, 0.4);}
	#topmenubox #nav {display:none;}
	.logobox a.logo {width: 210px; height:160px; margin-bottom:20px;}	
	.toggleMenu {display:block; float:right; width:20px; height:50px; background: url(img/menuswitch.png) no-repeat top right; margin:10px 4% 0 0;}
	
	.topspacer {position: relative; height: auto ! important; margin-top: 60px; padding-top:0; padding-bottom: 0%; background-position: center top;}	
	
	
	
	/*Nav*/
	
	.breadcrumbs { height:560px; }
	
	#nav2 {width:250px; height: auto; position:absolute; left:0; top:100px; z-index:2000; }
	#nav2  {background: #eee url(img/glitzi.png) no-repeat right 0px; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);}
	
	#nav2 li {width:250px;  padding: 0 0 0 0; }
	#nav2 li a {display:block; padding: 12px 0 12px 20px; font-size:18px;  color:#000; text-decoration: none; border-bottom: 1px solid #fff;}
	#nav2 li li a {padding: 10px 0 10px 30px; font-size:16px;  }
	#nav2 li li li a {padding: 8px 0 8px 40px; font-size:14px; }
	#nav2 li li li li a {padding: 6px 0 6px 50px; font-size:13px; ;}
	
	#nav2 li ul {display:none;}
	#nav2 li.menu-parent > ul, #nav2 li.menu-current > ul {display:block;}
	#nav2 li.is_opened > ul, #nav2 li.is_opened > ul {display:block;}
	
	#nav2 li a.menu-expand {background: transparent url(img/arr-down.png) no-repeat left center ;}
	#nav2 li a.menu-current { color:#fff; background-color: #cc0000;  text-shadow: 1px 2px 4px #000;}
	
	#nav2 ul li a.menu-expand.is_opened, #nav2 ul li a.menu-parent {font-weight:bold; background: #ddd url(img/arr-right.png) no-repeat 2px center ; }
	#nav2close {display:none;  position:absolute; top:0; width:100%;  height: 900px; background-image:none;}
	
	/*
	
	.breadcrumbs { width: 100%; height: auto; }
	.innerbc { margin: 2px 0 5px 2%; width: 96%; }
	.innerbc span  {display: block; float:left; padding: 2px 2px 2px 12px; margin: 0 0 5px 0;}
	.innerbc b  {display: none;}
	*/
	
	#nav2 .search_box_li {display: none;}
	.search_box { margin: 0 0 10px 20px;}
	#subnav {right:70px; top: 15px; }
	#aprevnext a {opacity:0.5;}
	
	
}

@media screen and (max-width: 800px) {

}
/* ======================================================================
Smaller Screens */
@media screen and (max-width: 600px) {


	.content, .sidebar {width:96%; margin-left:2%; float:none;}
	.mainbox .contentwide .contentwidenarrow, .sidebar {float: none; width:96%; border-left:none; }
	
	
	

}


@media screen and (max-width: 480px) {
#subnav {right:50px; }

}

Offline

#17 30.01.2019 16:28:21

foxlake
Mitglied

Re: scachgar - kein mobile Menü

Its now 2019,  and the template SCACHGAR is still not working on the download site, this is no advertising for WBCE.
and somewhere else in TXT template :  Auch sonst gibt es ein paar Dinge, die stören könnten. Ich hatte keine Lust mehr. Vielleicht ein andermal. ??

Isn't it better to make this right ?

Thank you in advance.

Offline

#18 30.01.2019 19:16:40

florian
Administrator

Re: scachgar - kein mobile Menü

Navigation is fixed


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#19 30.01.2019 19:40:28

ice
Mitglied

Re: scachgar - kein mobile Menü

ähh, auch hier? https://wbce.at/tpls/template-scachgar.html

Wenn man mit der Maus über z.B. Topics fährt, so kann man gar nicht die Preset Demos ganz links anklicken. Auch sonst wird die 3. Ebene nicht schön angezeigt, weil die die 2. Ebene überlagert ...

Beitrag geändert von ice (30.01.2019 19:40:52)

Offline

#20 30.01.2019 19:44:57

florian
Administrator

Re: scachgar - kein mobile Menü

Es ging nur um den JS-Fehler, der die mobile Navigation lahmgelegt hat. Das von Dir beobachtete Phänomen ist templatespezifisch, die Navigation von Scachgar ist halt sehr speziell und nicht für umfangreiche Seiten geeignet. (Für kleinere hingegen durchaus)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#21 30.01.2019 19:54:58

ice
Mitglied

Re: scachgar - kein mobile Menü

Achso ... okay ;-)

Offline

#22 30.01.2019 21:38:50

foxlake
Mitglied

Re: scachgar - kein mobile Menü

Thank you Florian !

Offline

#23 21.02.2019 10:52:17

nickfake
Mitglied

Re: scachgar - kein mobile Menü

Hallo,
ich hake an dieser Stelle einmal nach um keinen neuen Thread aufzumachen. Untermenüs unterstützt das Template nicht?
Ich kann die nämlich nicht auswählen. Sie erscheinen ich direkt unter dem Menüpunkt und verschwinden, wenn ich die Maus zum Submenü bewege...

p.s nicht am Handy sondern am Desktop, zum Mobilemenü komme ich später wink

Beitrag geändert von nickfake (21.02.2019 10:53:35)

Offline

#24 21.02.2019 11:10:37

florian
Administrator

Re: scachgar - kein mobile Menü

Doch, an sich schon, siehe auch Verhalten auf wbce.at/tpls. Das beschriebene Problem tritt auf, je weiter rechts ein Menüpunkt steht und je weniger Unterpunkte dieser hat. Da muss man dann ein bisschen an der Reihenfolge und der Struktur der Seite drehen, dann geht das auch. (Beispiel)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#25 21.02.2019 11:14:20

nickfake
Mitglied

Re: scachgar - kein mobile Menü

Verstanden, danke dir!

Offline

Fußzeile des Forums

up