Forum

Navi + Subnavi zum Aufschieben?

Wie verwendet man Templates oder erstellt Navigationen und passt diese an.
Antwort erstellen

Navi + Subnavi zum Aufschieben?

Beitragvon ridgeback » 2. Jun 2011, 16:53

Hi zusammen!!

konnte mir leider bisher selbst noch nichts funktionierendes einfallen lassen :(
ich habe eine seite mit mehreren ebenen von strukturen.

nun ist also der plan, dass ich 5 punkte anzeige, die aber selbst noch keine links sind. sondern bei einem event (klick oder hover, mal sehen) via prototype-js die navigation der 2. ebene aufscrollen lässt.

den effekt via prototype-js krieg ich hin.
nur wie ich den "blinden" oberpunkt + unterpunkte hinzaubere weiß ich nich :(
ridgeback
 
Beiträge: 31
Registriert: 23. Nov 2010, 20:39
Nach oben

Re: Navi + Subnavi zum Aufschieben?

Beitragvon Oliver.Kreischer » 2. Jun 2011, 19:39

Hi,

Du brauchst doch nur eine UL LI Liste aller Navigationspunkte - quasi eine Sitemap - richtig?

Guck Dir mal das an:
http://wiki.redaxo.de/index.php?n=R4.RexNavigation

Im Forum gibt es auch einige Diskussionen zur rex_navigation::factory.

LG
Oliver
http://kreischer.de - "It's very simple - you read the protocol and write the code." - Bill Joy
Benutzeravatar
Oliver.Kreischer
 
Beiträge: 1821
Registriert: 16. Dez 2004, 23:03
Wohnort: Feldafing
Nach oben

Re: Navi + Subnavi zum Aufschieben?

Beitragvon ridgeback » 2. Jun 2011, 20:27

hmm richtig, wenn man es so betrachtet, isses ne sitemap und an den jeweils obersten knochen leg ich ein event zum aufklappen.
ridgeback
 
Beiträge: 31
Registriert: 23. Nov 2010, 20:39
Nach oben

Re: Navi + Subnavi zum Aufschieben?

Beitragvon Oliver.Kreischer » 2. Jun 2011, 21:34

Aber gerne doch. Kein Problem :lol:
http://kreischer.de - "It's very simple - you read the protocol and write the code." - Bill Joy
Benutzeravatar
Oliver.Kreischer
 
Beiträge: 1821
Registriert: 16. Dez 2004, 23:03
Wohnort: Feldafing
Nach oben

Re: Navi + Subnavi zum Aufschieben?

Beitragvon ridgeback » 8. Jun 2011, 18:54

hi leute,


also ich muss nochmal stören...denn ich hab anscheinend eine denkblockade und komm nich mehr weiter.

ich habe eine liste mit einzelnen punkten. einige punkte haben wieder eine liste als zweite ebene.
so, diese zweite ebene soll erst mal display:none sein und erst bei einem mouse-over des mutterknotens angezeigt werden.

dummerweise haut das mit der struktur, die mir redaxo so ausspuckt wohl nicht wirklich hin...
ich hab mal einen beispiel-code geschrieben der dem entspricht was ich habe. copy&paste macht das zu einer html-datei die fix und fertig im browser angezeigt werden kann.

Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de">
   <head>

      <style type="text/css">
         <!--

         *                                 { color: #FFFFFF; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; margin: 0; padding: 0; }
         html, body                           { height: 100%; margin: 0; padding: 0; }
         body                              { overflow-y: scroll !important; text-align: center; background:#000; }

         .site                              { position:relative; width: 1199px; height:680px; background: #000 url(../layout/background.jpg) no-repeat center bottom; margin:0px auto; _border:1px solid red; }
         .navigation                           { position:absolute; left:62px; top:120px; border:1px solid white; }
         .navigation   .rex-navi1                  { }
         .navigation .rex-navi1 li.rex-current      { float:left; }
         .navigation .rex-navi1 li.rex-normal      { float:left; }

         .navigation   .rex-navi2                  { }
         .navigation .rex-navi2 li.rex-current      { float:left; }
         .navigation .rex-navi2 li.rex-normal      { float:left; }

         ul li                              { list-style: none outside none; }
         -->
      </style>


   </head>

   <body>
      <div class="site">
         <div class="navigation">
            <ul class="rex-navi1">
               <li class="rex-article-1 rex-current">
                  <a href="index.php?article_id=1" class="rex-current">Home</a>
               </li>
               <li class="rex-article-2 rex-normal">
                  <a href="index.php?article_id=2">Team</a>
               </li>
               <li class="rex-article-3 rex-normal">
                  <a href="index.php?article_id=3">System</a>
                  <ul class="rex-navi2">
                     <li class="rex-article-8 rex-normal">
                        <a href="index.php?article_id=8">Was ist REDAXO</a>
                     </li>
                     <li class="rex-article-9 rex-normal">
                        <a href="index.php?article_id=9">Für wen ist REDAXO</a>
                     </li>
                     <li class="rex-article-10 rex-normal">
                        <a href="index.php?article_id=10">Features</a>
                     </li>
                     <li class="rex-article-11 rex-normal">
                        <a href="index.php?article_id=11">Screenshots</a>
                     </li>
                  </ul>
               </li>
               <li class="rex-article-4 rex-normal">
                  <a href="index.php?article_id=4">Erste Schritte</a>
                  <ul class="rex-navi2">
                     <li class="rex-article-16 rex-normal">
                        <a href="index.php?article_id=16">REDAXO</a>
                     </li>
                     <li class="rex-article-12 rex-normal">
                        <a href="index.php?article_id=12">Doku</a>
                     </li>
                     <li class="rex-article-13 rex-normal">
                        <a href="index.php?article_id=13">Wiki</a>
                     </li>
                     <li class="rex-article-14 rex-normal">
                        <a href="index.php?article_id=14">Forum</a>
                     </li>
                  </ul>
               </li>
               <li class="rex-article-5 rex-normal">
                  <a href="index.php?article_id=5">FAQ</a>
               </li>
               <li class="rex-article-6 rex-normal">
                  <a href="index.php?article_id=6">Kontakt / Impressum</a>
               </li>
            </ul>
         </div>
      </div>
   </body>
</html>


ziel soll quasi eine navigation sein, die so "ähnlich" ist wie auf http://www.deutscherskiverband.de/
--> eine feste leiste mit navipunkten der 1. ebene. ein hover lässt in einem bereich unter der 1. ebene die liste mit weiteren inhalten erscheinen.
so und wer weiß wie´s geht? :(
ridgeback
 
Beiträge: 31
Registriert: 23. Nov 2010, 20:39
Nach oben

Re: Navi + Subnavi zum Aufschieben?

Beitragvon darwin » 9. Jun 2011, 09:02

Hi...
sowas könnte man auch als Drop Down Menü beschreiben ;)...

wenn du scho eine Ul li Liste aus dem Redaxo hast kannst du
das mit CSS und ein wenig JS lösen.

Beispiele findest du im netz (z.B.):
http://users.tpg.com.au/j_birch/plugins ... /#examples
http://www.sohtanaka.com/web-design/meg ... ss-jquery/
http://www.sohtanaka.com/web-design/exa ... dropdowns/

grz. Chris
Benutzeravatar
darwin
 
Beiträge: 1261
Registriert: 2. Jan 2007, 16:10
Wohnort: LA
Nach oben

Re: Navi + Subnavi zum Aufschieben?

Beitragvon Ingo » 10. Jun 2011, 22:14

Die Haupmenüpunkte fix ins Template packen. Pro Haupmenüpunkt ne Sitemap mit seinen Untermenüpunkten in ein div packen und verstecken. div anzeigen, wenn der Nutzer den zugehörigen fixen Hauptmenüpunkt hovert.
Ingo
 
Beiträge: 290
Registriert: 23. Jun 2010, 23:34
Nach oben
Antwort erstellen

Zurück zu Templates/Navigationen [R4]

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Deutsche Übersetzung durch phpBB.de
phpBB SEO