Autor |
Nachricht |
the godfather
Threadersteller
Dabei seit: 09.02.2004
Ort: -
Alter: 39
Geschlecht:
|
Verfasst Do 19.10.2006 10:52
Titel CSS Menu |
|
|
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!
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 19.10.2006 11:13
Titel
|
|
|
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
|
|
|
|
|
Anzeige
|
|
|
the godfather
Threadersteller
Dabei seit: 09.02.2004
Ort: -
Alter: 39
Geschlecht:
|
Verfasst Do 19.10.2006 11:20
Titel
|
|
|
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
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Do 19.10.2006 11:27
Titel
|
|
|
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
|
|
|
|
|
the godfather
Threadersteller
Dabei seit: 09.02.2004
Ort: -
Alter: 39
Geschlecht:
|
Verfasst Do 19.10.2006 11:45
Titel
|
|
|
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
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 19.10.2006 13:08
Titel
|
|
|
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
> ...
|
|
|
|
|
the godfather
Threadersteller
Dabei seit: 09.02.2004
Ort: -
Alter: 39
Geschlecht:
|
Verfasst Do 19.10.2006 13:40
Titel
|
|
|
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!
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 19.10.2006 15:50
Titel
|
|
|
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?
|
|
|
|
|
|
|
|
Ähnliche Themen |
javascript menu II
Frage zum Menu
[CSS] Menu <ul> Zeilenumbruch
JS-Dropdown Menu
CSS Menu positionieren
rollover im js menu
|
|