mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 10:12 Benutzername: Passwort: Auto-Login

Thema: CSS Menu vom 19.10.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Menu
Autor Nachricht
the godfather
Threadersteller

Dabei seit: 09.02.2004
Ort: -
Alter: 39
Geschlecht: Männlich
Verfasst Do 19.10.2006 10:52
Titel

CSS Menu

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen.

Ich stehe vor einem ziemlich kniffligen Problem.
Ich habe ein CSS-Listenmenu das im Moment so Funktioniert dass die hauptpunkte sichtbar sind und beim darüberfahren die unterpunkte aufklappen.
Das Problem ist, dass wenn ich einen punkt klicke, (logischerweise) alles wieder zuklappt.
Es soll aber so sein, dass die dem punkt übergeordneten und parallelen punkte sichtbar bleiben.
scheisse zu eklären, deshalb beispiel:

wenn wir hier sind:
Products > ELinOS > ELinOS Industrial Grade Linux > Overview

soll im menü das sichtbar sein:
Products
ELinOS
ELinOS Industrial Grade Linux
Overview
Versatile Embedded Linux
Application Development
Service and Support
Services & Solutions
Partner
News & Events
Company

Konzeptionell gleich umgesetzt:
NXP

Die dafür erforderlichen klassen habe ich schon eingeführt, irgendwie krieg ichs aber nicht gebacken.

HTML:
Code:

<div id="menu_1">
  <ul id="nav">
    <li class="menuact"><a href="index.php?id=8">Products</a>
      <ul>
        <li class="menuact"><a href="index.php?id=49">ELinOS</a>
          <ul>
            <li class="menuact"><a href="index.php?id=50">ELinOS Industrial Grade Linux</a>
              <ul>
                <li class="menuact"><a href="index.php?id=63">Overview</a></li>
                <li class="menuno"><a href="index.php?id=64">Versatile Embedded Linux</a></li>
                <li class="menuno"><a href="index.php?id=65">Application Development</a></li>
                <li class="menuno"><a href="index.php?id=66">Service and Support</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="menuno"><a href="index.php?id=7">Services & Solutions</a>
      <ul>
        <li class="menuno"><a href="index.php?id=18">Technology Solutions</a>
          <ul>
            <li class="menuno"><a href="index.php?id=23">AFDX</a></li>
            <li class="menuno"><a href="index.php?id=22">Java</a></li>
            <li class="menuno"><a href="index.php?id=21">TCP/IP</a></li>
          </ul>
        </li>
        <li class="menuno"><a href="index.php?id=17">Professional Services</a>
          <ul>
            <li class="menuno"><a href="index.php?id=29">Training</a></li>
            <li class="menuno"><a href="index.php?id=28">Engineering</a></li>
            <li class="menuno"><a href="index.php?id=27">Support</a></li>
            <li class="menuno"><a href="index.php?id=26">Collaboration</a></li>
            <li class="menuno"><a href="index.php?id=25">Quality</a></li>
            <li class="menuno"><a href="index.php?id=24">Certification</a></li>
            <li class="menuno"><a href="index.php?id=82">ELinOS Demoserver</a></li>
          </ul>
        </li>
        <li class="menuno"><a href="index.php?id=16">Industry Solutions</a>
          <ul>
            <li class="menuno"><a href="index.php?id=62">Aerospace & Defense</a></li>
          </ul>
        </li>
        <li class="menuno"><a href="index.php?id=15">Customer Success Storys</a></li>
      </ul>
    </li>
    <li class="menuno"><a href="index.php?id=6">Partner</a>
      <ul>
        <li class="menuno"><a href="index.php?id=48">Partner Directory</a>
          <ul>
            <li class="menuno"><a href="index.php?id=44">Hardware Partner</a></li>
            <li class="menuno"><a href="index.php?id=46">Software Partner</a></li>
            <li class="menuno"><a href="index.php?id=47">Distribution Partner</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="menuno"><a href="index.php?id=4">News & Events</a>
      <ul>
        <li class="menuno"><a href="index.php?id=51">Press</a>
          <ul>
            <li class="menuno"><a href="index.php?id=52">Press Releases</a></li>
            <li class="menuno"><a href="index.php?id=67">Archive</a></li>
            <li class="menuno"><a href="index.php?id=53">Media Ressources</a></li>
          </ul>
        </li>
        <li class="menuno"><a href="index.php?id=54">Events</a>
          <ul>
            <li class="menuno"><a href="index.php?id=87">Event Detail</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="menuno"><a href="index.php?id=3">Company</a>
      <ul>
        <li class="menuno"><a href="index.php?id=79">About SYSGO AG</a></li>
        <li class="menuno"><a href="index.php?id=36">Contact</a></li>
        <li class="menuno"><a href="index.php?id=73">Contact Form</a></li>
        <li class="menuno"><a href="index.php?id=74">FE Register</a>
          <ul>
            <li class="menuno"><a href="index.php?id=76">Register</a></li>
            <li class="menuno"><a href="index.php?id=78">Your Profile � Confirmation</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>


CSS:
Code:

ul#nav,
ul#nav ul {
   margin: 0;
   padding: 0;
   width: 160px; /* Width of Menu Items */
   border-bottom: 1px solid #005297;
   background: transparent; /* IE6 Bug */
   color: #FFFFFF;
   font-size: 12px;
   }
 
ul#nav li {
   position: relative;
   list-style: none;
   }
 
ul#nav li a {
   display: block;
   text-decoration: none;
   color: #FFFFFF;
   padding: 7px 9px 7px 9px;
   border-top: 1px solid #005297;
   border-bottom: 0;
   }
   
 
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
 
ul#nav ul {
   position: absolute;
   display: none;
   left: 159px; /* Set 1px less than menu width */
   top: 0;
   background: #0D3B69;
   border: 1px solid #005297;
   }
 
ul#nav li ul li a {border: 0;} /* Sub Menu Styles */
 
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
 
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { display: block; } /* The magic */
 
ul#nav li.menuno { background: transparent url(arrow.gif) right center no-repeat; }
 
ul#nav li.menuno:hover,
ul#nav li.over {
   /* background-color: #005297; */
}
 
 
ul#nav li a:hover {
   color: #4BA4DB;    
}

ul#nav ul ul {
   top: -1;
   }


Wer mir da helfen könnte, könnte sich meiner ewigen, grenzenlosen dankbarkeit gewiss sein!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 19.10.2006 11:13
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn ich dich richtig verstehe.


Code:
<li <?php if(isset($_GET['id']) AND ($_GET['id'] == "49")) echo 'class="menuact"'; ?>>
<a href="index.php?id=49">ELinOS</a>


Zuletzt bearbeitet von m am Do 19.10.2006 11:13, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
the godfather
Threadersteller

Dabei seit: 09.02.2004
Ort: -
Alter: 39
Geschlecht: Männlich
Verfasst Do 19.10.2006 11:20
Titel

Antworten mit Zitat Zum Seitenanfang

ich muss gestehen, keine ahnung ob das so gehen könnte. hilftz mir aber nicht, weil ist typo3 und deshalb kommt (zumindest hier) nur eine CSS-Lösung in frage
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Do 19.10.2006 11:27
Titel

Antworten mit Zitat Zum Seitenanfang

die seite wird bei klicken des links doch eh neu geladen.
und du wirst zu 100% eine logik brauchen, die dir dynamisch klassen in deiner liste ersetzt (ob nun client oder serverseitig.. das ginge mit javascript, php, perl [...] oder eben "tadaaa" typoscript...). anders ist das imo nicht zu bewerkstelligen.


Zuletzt bearbeitet von sahnemuh am Do 19.10.2006 11:30, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
the godfather
Threadersteller

Dabei seit: 09.02.2004
Ort: -
Alter: 39
Geschlecht: Männlich
Verfasst Do 19.10.2006 11:45
Titel

Antworten mit Zitat Zum Seitenanfang

sahnemuh hat geschrieben:
die seite wird bei klicken des links doch eh neu geladen.
und du wirst zu 100% eine logik brauchen, die dir dynamisch klassen in deiner liste ersetzt (ob nun client oder serverseitig.. das ginge mit javascript, php, perl [...] oder eben "tadaaa" typoscript...). anders ist das imo nicht zu bewerkstelligen.


sorry, hab ich wohl schlecht erkärt.
die klassen sind dynamisch.

typoscript:
Code:

# ------------------------
# Menu 1 cObject - vertical 2-level menu
# ------------------------

temp.menu_1 = HMENU
temp.menu_1.excludeUidList = 81

temp.menu_1 {
   1 = TMENU
   1 {
      expAll = 1
      wrap = <ul id="nav">|</ul>
      noBlur = 1
      NO = 1
      NO.wrapItemAndSub = <li class="menuno">|</li>
      ACT = 1
      ACT.wrapItemAndSub = <li class="menuact">|</li>

      IFSUB = 1
      IFSUB.wrapItemAndSub = <li class="menuno">|</li>
      ACTIFSUB < .ACT

   }
   2 < .1   
   2.wrap = <ul>|</ul>
   3 < .2   
   3.wrap = <ul>|</ul>
   4 < .3   
   4.wrap = <ul>|</ul>


... ist also nur die Frage, wie man menuact einblendet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 19.10.2006 13:08
Titel

Antworten mit Zitat Zum Seitenanfang

ah, ok:

Zu anfang ist sichtbar:

> Products
> Service & Solutions
> Partner
> News & Events
> Company

offen:

> Products
-> ELinOS
--> ELinOS Industrial Grade Linux
---> Overview
---> Versatile Embedded Linux
---> Application Development
---> Service and Support
> Service & Solutions
> Partner
> News & Events
> Company

So soll das laufen?

Ungefähr so:

Aktiver Menüpunkt = Products
Code:
ul#nav li.menuact ul li {
   display:block;
}

> Products
-> ELinOS
> ...

Aktiver Menüpunkt = ELinOS
Code:
ul#nav li.menuact ul li ul li.menuact {
   display:block;
}

> Products
-> ELinOS
--> ELinOS Industrial Grade Linux
> ...

Aktiver Menüpunkt = ELinOS Industrial Grade Linux
Code:
ul#nav li.menuact ul li ul li.menuact ul {
   display:block;
}

> Products
-> ELinOS
--> ELinOS Industrial Grade Linux
---> Overview
---> Versatile Embedded Linux
---> Application Development
---> Service and Support
> ...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
the godfather
Threadersteller

Dabei seit: 09.02.2004
Ort: -
Alter: 39
Geschlecht: Männlich
Verfasst Do 19.10.2006 13:40
Titel

Antworten mit Zitat Zum Seitenanfang

So ungefähr. Aber:

Wenn ich das mache, werden auch dei "nachbarunterpunkte" eigeblendet:
ul#nav li.menuact ul,
ul#nav li.menuact ul li.menuact ul,
ul#nav li.menuact ul li.menuact ul li.menuact ul {display:block; }

Wenn ich mit dem Kombiniere, werden die parallelen punkte nicht angezeigt:
(im Beispiel: "Overview" ja, "Versatile Embedded Linux" nicht)
ul#nav li.menuact ul li.menuno,
ul#nav li.menuact ul li.menuact ul li.menuno,
ul#nav li.menuact ul li.menuact ul li.menuact ul li.menuno {display:none; }

hab ich eine Chance?
(Oder muss ich php dazu bringen, den parallelen punkten der aktuellen seite auch die klasse manuact zu geben?)

DANKE!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 19.10.2006 15:50
Titel

Antworten mit Zitat Zum Seitenanfang

Was heißt die Nachbarunterpunkte werden auch eingeblendet? Kannst du gerade nochmal visualisieren, wie es momentan ist, und wie es sein sollte? Und auch nochmal den aktuellen Stand wie die Listen mit den CSS Klassen ausgegeben werden?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Spry Menu
i.e. zickt rum bei css-menu
Collapsible menu
<ul> Menu // validieren
Smart MENU
ich such ein nettes Menu
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.