[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
REDAXO Forum • Navigationsmenü Responsive Design
Seite 1 von 1

Navigationsmenü Responsive Design

Verfasst: 28. Okt 2014, 21:29
von Ron
Hallo Forum,
kann mir jemand weiterhelfen, das Redaxo-Navigationsmenü in Responsive-Web-Design umzusetzen?
Aktuell setze ich Redaxo in der Version 4.6.1 ein.
Für eure schnelle Hilfe schon mal vielen Dank :-)
Ron

Re: Navigationsmenü Responsive Design

Verfasst: 29. Okt 2014, 09:36
von Oliver.Kreischer
Hallo Ron,

das hat eher etwas mit CSS und/oder JS zu tun.

Die Navigation wird ja als unsortierte Liste (ul li) ausgegeben.
Musst einfach nur ein bisschen google :-)

http://responsivenavigation.net/index.html

LG
Oliver

Re: Navigationsmenü Responsive Design

Verfasst: 30. Okt 2014, 16:49
von Ron
Hallo Oliver,
vielen Dank für den schnellen Tipp. HaDas Hab ich mir gleich angeschaut.
Am Googeln alleine liegt es bei mir nicht, das habe ich natürlich schon getan.
Ich hab eher Probleme damit, die Funtionalitäten an den richtigen Stellen im Redaxo einzubauen.
D.h. wie und wo muss ich die Codezeilen im Template (template.php) einfügen, wenn z.B. ein Javascript benötigt wird?

Ganz konkret finde ich die Variante "Multi-Toggle-Menu" sehr gut. Jetzt müsste ich nur wissen, wie ich die Bezeichnungen der IDs und Classen zu meiner Struktur passend hinbekomme. Ich benutze den originalen Navigations-Code von Redaxo. Meine Kategorien gehen bis in die Kategorieebene 4 (leider)
----------------------------
TEMPLATE
<div id="navigation">
<?php
$nav = rex_navigation::factory();
$category_id = 0;
$depth = 4;
$open = FALSE;
$ignore_offlines = TRUE;
echo $nav->get($category_id, $depth, $open, $ignore_offlines);
?>
</div>
--------------------------
CSS
#navigation
ul.rex-navi1
ul.rex-navi2
usw...
-------------------------
Wie muss ich das denn anpassen?
Könntest du mir da kurz weiterhelfen?

Ich habe auch schon eine andere vielversprechende Möglichkeit im Web gefunden, komm aber nicht ganz klar damit, diese an den richtigen Stellen in redaxo zu integrieren.
http://webkrauts.de/artikel/2013/naviga ... ign-teil-1
Dort die Empfehlung "Elegante Variante".

Vielleicht kannst du mir noch einen Tipp geben, wie ich das machen muss.
Vielen Dank schon mal für die Mühe, wenn du dich ggf. darum kümmerst.
Wenn nicht, trotzdem vielen Dank :-)
Ron

Re: Navigationsmenü Responsive Design

Verfasst: 30. Okt 2014, 17:59
von Oliver.Kreischer
Hi Ron,

wenn Du die gewünschte Navigation statisch (HTML, CSS - ohne Redaxo) fertig baust bin ich bereit dir den weg mit Redaxo zu zeigen.

Dafür benötige ich dann später folgendes:

- die gebaute Navigation (HTML, CSS, evtl. JS)
- Redaxo Zugang (per PN)
- FTP Zugang (per PN)

LG
Oliver
(Und immer ein Backup machen bevor du Fremde an das Web lässt ....)

Re: Navigationsmenü Responsive Design

Verfasst: 30. Okt 2014, 18:55
von Ron
Hallo Oliver,
vielen Dank für deine Mühe und das freundliche Angebot zur Hilfe.
Die Navigation ist ja seitens Redaxo schon fertig vorgegeben, so meine ich ?!
Und diese würde ich auch gerne so übernehmen, da ich (glaube) nicht in der Lage bin, eine eigene Navigation in Redaxo selber aufzubauen.
Gerne lass ich dir aber den Zugang zukommen, damit du sehen kannst, was ich meine.
Diese (also meine) Redaxo-Testseite hat die Navigation ja bereits schon drin.
Ich hoffe, dass ich das jetzt nicht zu umständlich erkläre bzw. nachfrage.

Wenn das ginge, einfach ein kurzes OK durchgeben, dann schick ich dir den Zugang.

Lg Ron

Re: Navigationsmenü Responsive Design

Verfasst: 30. Okt 2014, 22:09
von Oliver.Kreischer
Hallo Ron,

leider habe ich es nicht geschafft dir mitzuteilen was ich bezwecke.

Also:
Wenn Du die Navigation statisch so baust wie du es haben möchtest (ignoriere bitte Redaxo in diesem Moment) baue die Rex Navigation dafür. Nur möchte ich sehen, dass Du auch etwas machst :-)

LG
Oliver

Re: Navigationsmenü Responsive Design

Verfasst: 30. Okt 2014, 22:41
von Ron
Hallo Oliver,
also, vielleicht verstehe ich es auch nicht.
Eigentlich bin ich nur auf der Suche nach jemanden (und das schon eine ganze Weile), der mir behilflich sein kann, die vorhandene Redaxo-Navigation auf Responsiv-Design anzupassen. Dabei habe ich nicht den Anspruch, dies zwingend selbst zu können, sondern das Problem einfach zu lösen. Meine eigentlicher job liegt auch an anderer Stelle. Die Web-sachen mach ich nur aus der Not heraus selbst, da sich niemanden dafür finden läßt bzw. alle meist erst in einigen Monaten Zeit dafür hätten. Nun könnte man sagen, "Soll er sich die Leistung doch einfach einkaufen, wenn er es selbst nicht kann" ! Genau das versuche ich ja schon seit längerer Zeit. Aber es läßt sich für irgendwie niemand finden, der das machen kann, und dabei geht es nicht darum, was es kosten würde, oder dass es womöglich nichts kosten soll. Als letzte Möglichkeit war deshalb meine Hoffnung, hier im Forum eventuell Hilfe zu bekommen. Aber irgedwie ist das wohl anders. In meinem Job gibt es Probleme und Problemlöser. ich versicúche meinen Kunden (oder denen die es werden sollen) möglichst schnell, unkompliziert und zielorientiert - und je nach Aufwand natürlich auch gegen entsprechende Entlohnung weiterzuhelfen. Vielleicht muss ich da eben im Bereich WEB einfach noch dazulernen.
Aber trotzdem vielen Dank für dein Bemühen und deine schnellen Antworten.
LG Ron

Re: Navigationsmenü Responsive Design

Verfasst: 30. Okt 2014, 22:51
von Oliver.Kreischer
Hey Ron,

hier im diesem Forumsbereich versuche ich "Hilfe zur Selbsthilfe" zu leisten.

Poste die Anfrage im Jobforum ( -> http://www.redaxo.org/de/forum/jobs-anfragen-f21/ ) und du findest bestimmt jemanden der das umsetzen kann.

Viele Grüße
Oliver

Re: Navigationsmenü Responsive Design

Verfasst: 30. Okt 2014, 23:03
von Ron
Hallo Oliver,
das mit der Hilfe zur Selbsthilfe find ich grundsätzlich ja super und es ist toll, das es Menschen mit solchem Engagement gibt. Ich helfe auch immer gerne, wenn es geht.
Ich selbst versuche "mir selbst zu helfen" seit fast 2 Jahren, sofern es die Zeit zuläßt, und dann in jeder freien Minute. Aber leider bin ich in dieser Sache etwas unter Druck und habe noch einige andere Baustellen, die ich mir erarbeiten muss. Deshalb kann ich einfach nicht alles selber komplett erarbeiten, was ja schön wäre.
Im Jobforum habe ich schon mehrmals Anfragen gestellt, leider aber (fast) ohne Erfolg oder wenn Antwort kam, dann oft ein unbefriedigendes Rum-ge-Eiere. Aber ich denke, ich finde eine Lösung :D .
Danke nochmal und schöne Grüße
Ron

Re: Navigationsmenü Responsive Design

Verfasst: 27. Jan 2015, 13:05
von jeje
Hallo Ron,

wenn ich Dich richtig verstehe benötigst Du ein Toggle Menü wie es bei Bootstrap genutzt wird.

Ich habe letztens ebenfalls so ein Menü für ein Projekt benötigtet und habe dieses gefunden: http://www.jqueryscript.net/menu/Easy-M ... on-js.html was sich sehr einfach an das Redaxo Menü anpassen lässt:

Code: Alles auswählen

<div class="nav">
<?php
	$nav = rex_navigation::factory();
	$navout = $nav->get(0,4,TRUE,TRUE);
	echo str_replace ('ul class="', 'ul ', $navout);
?>
</div>
<script>
	$(function(){
	$('.nav').reaktion({navIcon: '<i class="fa fa-bars"></i>',
        arrowIcon: '<i class="fa fa-angle-down"></i>',
        arrowsToggleOnly: false});
	});
</script>
Hat bei mir super geklappt obwohl ich mehr auf die Superfish Menüs stehe, ist aber wohl Geschmacksache.

Gruß
Jochen

Re: Navigationsmenü Responsive Design

Verfasst: 7. Apr 2015, 15:19
von Ron
jeje hat geschrieben:Hallo Ron,

wenn ich Dich richtig verstehe benötigst Du ein Toggle Menü wie es bei Bootstrap genutzt wird.

Ich habe letztens ebenfalls so ein Menü für ein Projekt benötigtet und habe dieses gefunden: http://www.jqueryscript.net/menu/Easy-M ... on-js.html was sich sehr einfach an das Redaxo Menü anpassen lässt:

Code: Alles auswählen

<div class="nav">
<?php
	$nav = rex_navigation::factory();
	$navout = $nav->get(0,4,TRUE,TRUE);
	echo str_replace ('ul class="', 'ul ', $navout);
?>
</div>
<script>
	$(function(){
	$('.nav').reaktion({navIcon: '<i class="fa fa-bars"></i>',
        arrowIcon: '<i class="fa fa-angle-down"></i>',
        arrowsToggleOnly: false});
	});
</script>
Hat bei mir super geklappt obwohl ich mehr auf die Superfish Menüs stehe, ist aber wohl Geschmacksache.

Gruß
Jochen
Hallo Jochen,
leider hab ich deinen Beitrag erst jetzt gesehen. Ich habe es zwischenzeitlich genau so mit Toggle umgesetzt. Deshalb hier trotzdem nochmal Vielen Dank für deine Mühe und den Tipp. Ich schau mir das an und vergleiche es mit meiner Lösung.
Gruß Ron

Re: Navigationsmenü Responsive Design

Verfasst: 7. Apr 2015, 15:24
von jeje
Hallo Ron,

wenn Du eine ander Lösung hast bitte auch posten, der nächste freut sich :D

Gruß
Jochen

Re: Navigationsmenü Responsive Design

Verfasst: 9. Sep 2015, 12:27
von tulla
Ein weiteres Beispiel wäre dieses:
Es ließt die Roots aus und bildet Untermenüs:

Code: Alles auswählen

<div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a href="index.php" class="navbar-brand"><strong></strong></a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">

	<?php

$PATH = explode("|",$this->getValue("path").$this->getValue("article_id")."|");

echo '<ul class="nav navbar-nav">';
foreach (OOCategory::getRootCategories() as $lev1)
	{
		if(count($lev1->getChildren())>0)
					{
					echo '<li class="dropdown">
							  <a class="dropdown-toggle" data-toggle="dropdown" href="#" >'.$lev1->getName().'</a>
							  <ul class="dropdown-menu" aria-labelledby="themes">';
						foreach ($lev1->getChildren() as $lev2)
							{
							if($lev2->getId() == $PATH[1])
							echo '<li class="divider"></li>
							<li class=""><a href="'.$lev2->getUrl().'">'.$lev2->getName().'</a></li>';
							else
							echo '<li><a href="'.$lev2->getUrl().'">'.$lev2->getName().'</a></li>';
							}
						echo '</ul>
							</li>';
					}
						else
					{
						echo '<li><a href="'.$lev1->getUrl().'">'.$lev1->getName().'</a>';
					}
				echo '</li>';
	}
echo '</ul>';
?> 
	<ul class="nav navbar-nav navbar-right">
			<li>
				<form class="navbar-form navbar-right" name="search_form" method="get" action="index.php">
					<input class="form-control input-sm" style="margin-top: 6px;" type="text" name="auftrag" placeholder="Auftragsnummer">
					<input type='hidden' name='page' value='detail'>
				</form>
            </li>
          </ul>

		</div>
      </div>
    </div>
Die <li> lassen sich super mit Symbolen erweitern, sofern die Font-Awesome mit hinterlegt sind.