New Responsive Template - JekyllAndHyde

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by lck » Mon Jul 02, 2018 8:10 pm

lck wrote:
Mon Jul 02, 2018 6:05 pm
OK, da müsste uns Christoph weiterhelfen und den Code von oben noch anpassen, wenn es überhaupt so möglich ist.
Blöde Idee? Man könnte das auch mit reinem css lösen. Also das Original-Template verwenden und per css den ddm_opener im menulevel1 absolute positionieren und somit den ddm_link überdecken :)

Quick-and-Dirty-Fix, in lck_ddmenu.css am Ende einfügen:

Code: Select all

.lck_nav > ul > li > .ddm_opener {
	position: absolute;
	left: 0;
	width: 100%;
}
.lck_nav > ul > li > .ddm_opener .ddm_opener_icon:before {
	text-align: right;
}

/* Mobile menu */
.lck_nav_mobil nav a {
	position: relative;
	z-index: 100;
}
.lck_nav_mobil nav .parent > .more {
	position: relative;
	z-index: 110;
}
.lck_nav_mobil nav > ul > .parent > .more {
	background-color: transparent;
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 110;
}
.lck_nav_mobil nav > ul > .parent.closed > .more:before,
.lck_nav_mobil nav > ul > .parent.open > .more:before {
	text-align: right;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by cmb » Mon Jul 02, 2018 9:05 pm

lck wrote:
Mon Jul 02, 2018 6:05 pm
Aha, jetzt weiß ich was du willst. Wenn ich das richtig verstehe, sollen menulevel2-Links weiterhin anklickbar sein nur nicht die menulevel1-Links!
OK, da müsste uns Christoph weiterhelfen und den Code von oben noch anpassen, wenn es überhaupt so möglich ist.
Sorry, I'm not really sure what exactly should be done (and there is already a pure CSS solution). Anyhow, inside of function renderMenuItem($i) you can access the menu level of the current page like so:

Code: Select all

$GLOBALS['l'][$this->ta[$i]]
E.g.:

Code: Select all

if ($GLOBALS['l'][$this->ta[$i]] == 1) {
    // handle menu level 1
} elseif ($GLOBALS['l'][$this->ta[$i]] == 2) {
    // handle menu level 2
}
Christoph M. Becker – Plugins for CMSimple_XH

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by lck » Tue Jul 03, 2018 9:50 am

Danke Christoph, so funktioniert es auch. Somit hätten wir schon 2 Varianten zur Auswahl :)

template.htm, function renderMenuItem($i) austauschen gegen:

Code: Select all

    function renderMenuItem($i)
    {
        global $h;
        //Alle Eintraege klickbar lassen
		$t = $this->renderAnchorStartTag($i) . $h[$this->ta[$i]] . '</a>';
		//Wenn Kind-Elemente vorhanden sind
		if ($this->hasChildren($i)) 
			{
				//Link in <span> einschliessen
				$t = '<span class="ddm_link">' . $t . '</span>';
				//Hamburger-Symbol fuer Touch-Geraete anhaengen
				$t .= '<span class="ddm_opener"><span class="ddm_opener_icon"></span></span>';
			}
			
		if ($GLOBALS['l'][$this->ta[$i]] == 1) //Nur f. menulevel1, Link oeffnet nur das Untermenue
			{
				$t = $h[$this->ta[$i]];
				//Link in <span> einschliessen
				$t = '<span class="ddm_link"><span>' . $t . '</span></span>';
			}
		
		return $t;
    }
In der lck_ddmenu.css ab Zeile 205 noch ändern zu:

Code: Select all

.lck_nav li:hover > .ddm_link ~ ul {
	opacity: 1;
	visibility: visible;
}
/* .lck_nav li > .ddm_link:hover ~ ul {
	visibility: hidden;
} */
... und am Ende der Datei das anfügen:

Code: Select all

.lck_nav .ddm_link span,
.lck_nav .ddm_opener span {
	color: #fff;
	cursor: default;
	display: table-cell;
	line-height: normal;
	vertical-align: middle;
}
.lck_nav .ddm_opener span {
	font-size: 10px;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by lck » Tue Jul 03, 2018 11:46 am

lck wrote:
Tue Jul 03, 2018 9:50 am
Somit hätten wir schon 2 Varianten zur Auswahl
Leider nicht ganz, das jQuery-Menü für die mobilen Geräte müsste auch noch angepasst werden. Da erscheint mir die CSS-Lösung doch simpler.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

SiNiTaSa
Posts: 114
Joined: Tue Jan 03, 2017 10:33 am
Location: BW|GERMANY

Re: New Responsive Template - JekyllAndHyde

Post by SiNiTaSa » Tue Jul 03, 2018 4:36 pm

Wie kann ich die Haupt Navigationspunkte jetzt noch zusätzlich anklickbar machen ??

Hat sich erledigt :) Habe es rausgefunden :)
aka smaxle | plugin_XH 1.7

bca
Posts: 293
Joined: Tue Sep 15, 2009 4:49 pm

Re: New Responsive Template - JekyllAndHyde

Post by bca » Tue Jul 03, 2018 8:14 pm

Hi
Just got around to trying these changes.

I like it. :D

The CSS solution works just as I wanted

Thank you very much for your help/persistence

B

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Re: New Responsive Template - JekyllAndHyde

Post by wbs » Sun Sep 02, 2018 6:07 am

Is there a way to skip the "landing page" and get to the homepage right away?

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by frase » Sun Sep 02, 2018 10:21 am

wbs wrote:
Sun Sep 02, 2018 6:07 am
Is there a way to skip the "landing page" and get to the homepage right away?
Das würde wohl das Template zerstören.

---

@Ludwig
Wenn kein Javascript verfügbar ist, wird bleibt die obere Navigation auch beim Scrollen transparent.
Eine Lösung wäre, im Stylesheet den Hintergrund nicht transparent zu machen, sondern erst im Template per Script.
Mögliche Lösung:
In lck_ddmenu.css Zeile 5:

Code: Select all

.lck_nav {
    background-color: rgba(199, 133, 50, 0.98);
...
Und im Template ab Zeile 85 (vor </head>):

Code: Select all

<script>
document.write('<style>.lck_nav { background-color: transparent; }<\/style>');
</script>
Ob das die eleganteste Lösung ist - weiß ich nicht.
Bei mir funktioniert das.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by lck » Sun Sep 02, 2018 1:50 pm

wbs wrote:
Sun Sep 02, 2018 6:07 am
Is there a way to skip the "landing page" and get to the homepage right away?
Yes, delete in template.htm line 75 - 78:

Code: Select all

<!-- startpage.css - Only included for first page - Important, must be included as second last css! -->
<?php if ($s === 0):?>
<?php echo '<link rel="stylesheet" type="text/css" href="'.$pth['folder']['template'].'startpage.css">'."\n"; ?>
<?php endif;?>
Then there are other adjustments to make, for example the "searchform" install elsewhere.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by lck » Sun Sep 02, 2018 2:13 pm

frase wrote:
Sun Sep 02, 2018 10:21 am
Das würde wohl das Template zerstören.
Der Kunde ist König ;)
frase wrote:
Sun Sep 02, 2018 10:21 am
Wenn kein Javascript verfügbar ist, wird bleibt die obere Navigation auch beim Scrollen transparent.
Eine Lösung wäre, im Stylesheet den Hintergrund nicht transparent zu machen, sondern erst im Template per Script.
Mögliche Lösung:
Schön, funktioniert dann genauso wenn JS verfügbar ist und wenn nicht, wird eben die Menü-Leiste permanent farblich dargestellt und ist auch etwas höher, aber damit könnte man leben.
Aber, ohne JS funktioniert auch das mobile Menü nicht mehr und bestimmt auch etliche XH-Plugins, zumindest in ihrer Funktion eingeschränkt. Vielleicht sollte man in der Template-Dokumentation die Voraussetzungen dementsprechend anpassen "JavaScript" erforderlich.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply