Hallo,
melde mich heute nur mit einem interessanten Link zum Thema CSS-Menüs:
http://www.cssplay.co.uk/menus/index.html
Hier findet Ihr super Vorschläge zur Erstellung von CSS-basierenden Menüs.
Hab gar nicht gewusst was sich mit CSS alles machen lässt :p
Viel Spass
Alex
Threadtitel ergänzt
- - - - - - - - - - - - -
Ich denke, es wäre gar nicht schlecht, wenn eine kleine Sammlung an HTML/CSS Referenzen im Forum gepflegt wird.
Mal sehen, evtl. lässt sich ja was zentral was einrichten 😉 .
danke und grüsse
JIP, wäre super!
So würde man sich oft viel, viel Zeit bei der Suche nach Lektüren ersparen!
😉
Lg Alex
Hallo cyberworks
schon versucht so ein menu in typo umzusetzen? gar nicht so einfach, bin schon seit geraumer Zeit dran und habe auch 2 lösungsansätze von anderen gefunden, aber richtig funktionieren tut keine. Gar nicht so einfach mit den conditions für den IE. siehe das css, wie setzt man das korrekt um in typoscript, das ist hier die gretchen frage. Wer das schafft ist ein echter Typo Profi würd ich meinen...
hier mal so ein css
/* common styling */
.menu1{
font-family: arial, sans-serif;
width:150px;
height:250px;
position:relative;
font-size:11px;
margin:30px 0;
background:#fff;
padding:5px 5px;
border:1px dashed #ccc;
top: 0;
left: 20;
}
.menu1 ul {
padding:0; margin:0; list-style-type: none;
}
/* hier wird die position von links des submenus definiert */
.menu1 ul li ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:-1px; left:145px;
}
.menu1 ul li {
float:left; position:relative;
}
/* hier wird definiert wieviele pixel von links das background image des submenus beginnt nur fuer firefox bei width*/
.menu1 ul li a, .menu1 ul li a:visited {
display:block; float:left; text-decoration:none; color:#000; width:110px; height:30px; line-height:29px; font-size:11px; background:transparent; padding-left:35px;
}
/* hier wird definiert wieviele pixel von links das background image des submenus beginnt nur fuer ie bei width*/
* html .menu1 ul li a, .menu1 ul li a:visited {width:110px; w\idth:110px;}
.menu1 ul li.home {background:url(home2.gif);}
.menu1 ul li.leistungen {background:url(leistungen2.gif);}
.menu1 ul li.unternehmen {background:url(unternehmen2.gif);}
.menu1 ul li.contact {background:url(kontakt2.gif);}
.menu1 ul li.anspruch {background:url(anspruch2.gif);}
.menu1 ul li.news {background:url(news2.gif);}
.menu1 ul li.projekt {background:url(projektablauf2.gif);}
.menu1 ul li.betreuung {background:url(betreuung2-2.gif);}
.menu1 ul li.specials {background:url(specials2.gif);}
.menu1 ul li ul li.subprod1 {background:url(subprod1.gif) no-repeat;}
.menu1 ul li ul li.subprod2 {background:url(subprod2.gif) no-repeat;}
.menu1 ul li ul li.subprod3 {background:url(subprod3.gif) no-repeat;}
.menu1 ul li ul li.subnews1 {background:url(subnews1.gif) no-repeat;}
.menu1 ul li ul li.subnews2 {background:url(subnews2.gif) no-repeat;}
.menu1 ul li ul li.subnews3 {background:url(subnews3.gif) no-repeat;}
.menu1 ul li ul li.subserv1 {background:url(subserv1.gif) no-repeat;}
.menu1 ul li ul li.subserv2 {background:url(subserv2.gif) no-repeat;}
.menu1 ul li ul li.subserv3 {background:url(subserv3.gif) no-repeat;}
.menu1 ul li ul li.subserv4 {background:url(subserv4.gif) no-repeat;}
.menu1 ul li ul li.subserv5 {background:url(subserv5.gif) no-repeat;}
.menu1 table {
border-collapse:collapse; border:0; margin:-1px; padding:0; font-size:1em;
}
.menu1 ul li:hover a,
.menu1 ul li a:hover{
text-decoration:underline; border:0;
}
.menu1 ul li:hover ul,
.menu1 ul li a:hover ul {
visibility:visible; position:absolute; width:180px; height:auto; border:1px solid #606; z-index:10; background:#f8f8f8; overflow:visible;
}
.menu1 ul li:hover ul li a,
.menu1 ul li a:hover ul li a{
display:block; background:transparent; color:#000; width:150px; line-height:15px; padding:5px 0 5px 35px; height:auto; text-decoration:none;
}
* html .menu1 ul li a:hover ul li a {width:180px; w\idth:180px;}
.menu1 ul li:hover ul li a:hover,
.menu1 ul li a:hover ul li a:hover {
text-decoration:underline; border:0;
}
.menu1 ul li:hover ul li ul,
.menu1 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:151px;
}
.menu1 ul li:hover ul li:hover ul,
.menu1 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; width:150px; height:auto; color:#000; padding:0; border:1px solid #888; list-style-type:none; background:#eee;
}
.menu1 ul li:hover ul li:hover ul li a,
.menu1 ul li a:hover ul li a:hover ul li a {
display:block; width:115px; background:transparent; color:#000;
}
* html .menu1 ul li a:hover ul li a:hover ul li a {width:150px; w\idth:150px;}
.menu1 ul li:hover ul li:hover ul li a:hover,
.menu1 ul li a:hover ul li a:hover ul li a:hover {
background:#ddd; text-decoration:underline;
}
und hier noch ein dazugehörendes html beispiel:
<!-- beginn css menu -->
<div class="menu1">
<ul>
<li class="home"><a href="index.php">Home</a></li>
<li class="leistungen"><a href="leistungen.php">Leistungen
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li class="subprod1"><a href="leistungen.php">Leistungen</a></li>
<li class="subprod1"><a href="inhalte.php">Inhalte</a></li>
<li class="subprod2"><a href="gestaltung.php">Gestaltung</a></li>
<li class="subprod2"><a href="programmierung.php">Programmierung</a></li>
<li class="subprod2"><a href="#suchmaschinenoptimierung.php">Suchmaschinenoptimierung</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
<li class="anspruch"><a href="anspruch.php">Anspruch</a></li>
<li class="unternehmen"><a href="unternehmen.php">Unternehmen</a></li>
<!--begin special block 2-->
<li class="betreuung"><a href="betreuung.php">Betreuung
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li class="subprod1"><a href="optimierung.php">Optimierung</a></li>
<li class="subprod1"><a href="auswertung.php">Statistik Auswertung</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
<!-- ende special Block 2-->
<!--begin special block 3-->
<li class="specials"><a href="specials.php">Specials
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li class="subprod1"><a href="content-management.php">Contenmanagement Systeme</a></li>
<li class="subprod1"><a href="internetapplikationen.php">Internetapplikationen</a></li>
<li class="subprod1"><a href="webhosting.php">Webhosting</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
<!-- ende special Block 3-->
<li class="projekt"><a href="projektablauf.php">Projektablauf</a></li>
<li class="contact"><a href="kontakt.php">Kontakt</a></li>
</div>
<!--end of css menu -->
viel Glück
Hallo darkdesire!
Kannst du mal angeben, welches der Menüs du so umgesetzt hast. Dann wird das Interesse schneller befriedigt.
Danke
Grüße
Erwin[/img]
Hallo allerseits!
Ich habe auch mal rumgespielt und versucht, das ein oder andere Menü umzusetzen. Da ich allerdings keines des Menüs bisher irgendwo produktiv einsetze: no guarantee
Die verschiedenen Menüs sind bei mir in Basistemplates abgelegt, welche ich dann einfach im Root-Template dazuklicke. Daher der "seltsame" Aufruf der CSS-Datei am Anfang des typoScripts. Nicht verwirren lassen. Man kann, muss es aber nicht über ein Basistemplate machen. Da ich auch noch mit templaVoila arbeite, beginnt das Script für das menü mit lib. Nicht TemplaVoila-Benutzer müssen das halt auf den traditionellen Weg anpassen.
Bei diesem Menü handelt es sich um das folgende:
http://www.cssplay.co.uk/menus/menueight.html
typoScript
page.headerData.600 = TEXT
page.headerData.600.dataWrap = <link rel="stylesheet" href="fileadmin/templates/css/menu_horizontal_b.css" />|
##########################################
lib.mainMenu = HMENU
lib.mainMenu.special = directory
lib.mainMenu.special.value = 30
lib.mainMenu.entryLevel = 1
lib.mainMenu.wrap = <ul>|</ul>
### erste Menuebene
lib.mainMenu.1 = TMENU
lib.mainMenu.1 {
### Normal
NO.stdWrap.htmlSpecialChars = 1
NO.allWrap = <div class="box"> | </div>
NO.linkWrap = <span class="topleft"></span> <span class="topright"></span>
NO.ATagBeforeWrap = 1
### Active
ACT = 1
ACT.allWrap = <div class="box"> | </div>
ACT.linkWrap = <span class="topleft"></span> <span class="topright"></span>
ACT.ATagBeforeWrap = 1
### Current page
CUR = 1
CUR.allWrap = <div class="box"> | </div>
CUR.linkWrap = <span class="topleft"></span> <span class="topright"></span>
CUR.ATagBeforeWrap = 1
}
und die dazugehörige CSS-Datei
#nav {
margin-left: auto;
margin-right: auto;
}
#nav_main {
text-align:center;
position:relative;
top:10px;
height:30px;
}
.box {
position:relative;
float:left;
top:3px;
}
#nav_main a, #nav_main a:visited {
position:relative;
text-decoration:none;
background-color:#336699;
color:#fff;
display:block;
width:140px;
height:15px;
padding:5px;
margin:0 1px;
}
#nav_main a .topleft, #nav_main a .topright {
position:absolute;
top:0;
width:0;
height:0;
overflow:hidden;
border-top:10px solid #fff;
}
#nav_main a .topleft {
left:0;
border-right:10px solid #336699;
}
#nav_main a .topright {
left:140px;
border-left:10px solid #336699;
}
#nav_main a:hover {
background-color:#99cf99;
color:#336699;
}
#nav_main a:hover .topleft {
border-right:10px solid #99cf99;
border-top:10px solid #fff;
}
#nav_main a:hover .topright {
border-left:10px solid #99cf99;
border-top:10px solid #fff;
}
und so sieht der entsprechende Abschnitt im HTML-Template aus
<div id="nav">
<div id="nav_main">
</div>
</div>
Verbesserungen werden gerne entgegengenommen.
Erwin
Nichts für ungut.
1. Ist man dadurch kein "TYPO3-Profi". Durch Grundverständnis in wrap wirst Du sowas umsetzen können. Vorgabe + CSS sind ja schon vorhanden (Details zu TypoScript-Syntax hier nachlesbar).
2. War der Thread eigentlich für die Info des Hyperlinks gedacht. Falls detaillierte Fragen dazu auftauchen, bitte eigenen Thread öffnen.
@ehontheim:
Bitte Editier-Funktion beachten, hätte auch in ein Posting gepasst.
Solange keine zentrale Sammlung vorhanden ist, sind User auf einen übersichtlichen Thread für die CSS-Info angewiesen.
Also nochmals: Nichts für ungut. Erstellt doch im Unterforum einen neuen Thread mit detaillierter Frage. Hyperlink und Infos von cssplay könnt ihr ja nochmals dort rein kopieren.
grüsse
Thread geschlossen.
ok, ich habe dazu mal einen Sammelthread angelegt:
#47827
Er ist geschlossen und Links können nur von den Mods hinzugefügt werden.
