• Forum
• TYPO3 CMS: TypoScript
• Menüs
• Alle Menüebenen horizontal??

Alle Menüebenen horizontal??

• Schengo
  T3PO

  0 x

  26	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  09. 08. 2007, 14:16

  Hallo zusammen.

  Ich bin noch ziemlich neu bei Typo3 und habe ein Menü übernommen.

  Da ich kein CSS-Spezialist bin, suche ich noch die Frage auf meine Antwort, ob es möglich ist alle Menüebenen horizontal darzustellen. Zur Zeit habe ich drei Ebenen, aber vielleicht soll noch ein, zwei dazukommen.

  Meine erste Ebene ist bereits horizontal, aber meine Bemühungen haben noch kein sauberes Ergebnis hinbekommen.

  Muss ich jedes ul- oder li-Tag einzeln ansprechen? Oder gibt es auch eine allgemeine Lösung?

  Danke schonmal für eure Bemühungen.

  [TS]page = PAGE
  page.10 = TEMPLATE
  page.10.template = FILE
  page.10.template.file = fileadmin/test_temp/index.html
  page.10.workOnSubpart = DOCUMENT_BODY
  page.10.subparts.content < styles.content.get
  page.10.marks.down < styles.content.getLeft
  page.10.marks.footer < styles.content.getRight

  page.15.workOnSubpart = DOCUMENT_BODY
  page.15.subparts.down < styles.content.getLeft

  page.headerData.20 = TEXT
  page.headerData.20.value = <link rel="stylesheet" href="fileadmin/test_temp/jdMenu.css" type="text/css" /><script type="text/javascript" src="fileadmin/test_temp/jquery-1.1.2.js"></script><script type="text/javascript" src="fileadmin/test_temp/jquery.bgiframe.js"></script><script type="text/javascript" src="fileadmin/test_temp/jquery.dimensions.js"></script><script type="text/javascript" src="fileadmin/test_temp/jquery.jdMenu.js"></script><link href="fileadmin/test_temp/jdMenu.slate.css" rel="stylesheet" type="text/css" />

  page.10.marks {
  MENU = HMENU
  MENU {
  #entryLevel = 1
  special = directory
  special.value = 2
  stdWrap.required = 1
  stdWrap.wrap =
  1 = TMENU
  1 {
  expAll = 1
  noBlur = 1
  wrap = <ul class="jd_menu jd_menu_slate">|</ul>
  NO = 1
  NO {
  ATagTitle.field = abstract // description // title
  wrapItemAndSub = <li>|</li>
  stdWrap = upper
  }
  CUR < .NO
  CUR = 1
  }
  2 < .1
  2.wrap = <ul>|</ul>
  2.CUR < .1.NO
  2.CUR = 1
  
  3 <.1
  3.wrap = <ul>|</ul>
  3.CUR < .1.NO
  3.CUR = 1
  }
  }
  [/TS]

  Zudem noch die CSS-Datei: jdmenu.css
  [HTML]ul.jd_menu,
  ul.jd_menu_vertical {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  }
  ul.jd_menu ul,
  ul.jd_menu_vertical ul {
  display: none;
  }
  ul.jd_menu li {
  float: left;
  }

  /* -- Sub-Menus -- */
  ul.jd_menu ul,
  ul.jd_menu_vertical ul {
  position: absolute;
  display: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  z-index: 10000;
  }
  ul.jd_menu ul li,
  ul.jd_menu_vertical ul li {
  float: none;
  margin: 0px;
  display: inline;
  }

  [/HTML]

  und die CSS-Datei jdmenu.slate.css
  [HTML]ul.jd_menu_slate {
  height: 19px;
  border: 1px solid #FFFFFF;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  clear: both;
  }

  ul.jd_menu_vertical {
  width: 200px;
  height: auto;
  clear: both;
  }

  ul.jd_menu_slate a,
  ul.jd_menu_slate a:active,
  ul.jd_menu_slate a:link,
  ul.jd_menu_slate a:visited {
  text-decoration: none;
  color: #000000;
  font-weight:bold;
  }
  ul.jd_menu_slate a:hover {
  text-decoration: none;
  color: #FF0000;
  font-weight:bold;
  }
  ul.jd_menu_slate ul li a,
  ul.jd_menu_slate ul li a:active,
  ul.jd_menu_slate ul li a:link,
  ul.jd_menu_slate ul li a:visited {
  color: #000000;
  font-weight:bold;
  }
  ul.jd_menu_slate li {
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  padding: 2px 6px 4px 6px;
  cursor: pointer;
  white-space: nowrap;
  color: #000000;
  font-weight:bold;
  }
  ul.jd_menu_slate li.jd_menu_active_menubar,
  ul.jd_menu_slate li.jd_menu_hover_menubar {
  padding-left: 5px;
  border-left: 1px solid #FFFFFF;
  padding-right: 5px;
  border-right: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  color: #000000;
  font-weight:bold;
  }

  ul.jd_menu_vertical li.jd_menu_active_menubar,
  ul.jd_menu_vertical li.jd_menu_hover_menubar {
  padding-left: 6px;
  padding-top: 1px;
  border-top: 1px solid #FFFFFF;
  border-left: 0px;
  border-right: 0px;
  }

  ul.jd_menu_slate ul {
  border: 1px solid #FFFFFF;
  }
  ul.jd_menu_slate ul li {
  padding: 3px 10px 3px 4px;
  border: none;
  color: #FF0000;
  font-weight:bold;
  }
  ul.jd_menu_slate ul li.jd_menu_active,
  ul.jd_menu_slate ul li.jd_menu_hover {
  padding-top: 2px;
  border-top: 1px solid #FFFFFF;
  padding-bottom: 2px;
  border-bottom: 1px solid #FFFFFF;
  color: #FF0000;
  font-weight:bold;
  }
  ul.jd_menu_slate ul li.jd_menu_active a.jd_menu_active,
  ul.jd_menu_slate ul li.jd_menu_hover a.jd_menu_hover {
  color: #FF0000;
  font-weight:bold;
  }

  [/HTML]

  Gruß Schengo

---

• 1

• Dander
  Flash Gordon

  0 x

  2287	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  09. 08. 2007, 14:33

  Tach,

  am betsen du arbeitest mit float: left;
  in der css Datei beim jeweiligen Elment

  [HTML]ul.jd_menu ul li,
  ul.jd_menu_vertical ul li {
  float: left;
  margin: 0px;
  display: inline;
  }
  [/HTML]

• Schengo
  T3PO

  0 x

  26	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  09. 08. 2007, 14:45

  Hallo Dander.

  Danke für deine schnelle Antwort.

  Ich habe deinen Vorschlag mal umgesetzt und habe folgenden Effekt:
  Im IE habe ich einen ganz komischen Effekt. Erste Ebene ist einwandfrei. Die zweite Ebene mird beim hover der ersten Ebene vertikal angezeigt. Geht man kurz vom Menüpunkt runter und direkt wieder drauf, springt der auf horizontal um :o Die Unterebenen verhalten sich alle so.
  Im Firefox werden die erste und zweite Ebene korrekt angezeigt und die dritte vertikal.

  Hast du eine Idee?

• einpraegs...
  MacGyver

  0 x

  9340	Beiträge
  80	Hilfreiche Beiträge

  • Facebook
  • Twitter

  09. 08. 2007, 16:56

  Das ist ausschließlich Sache von HTML und CSS - einfach mal eine Testdatei auf deinem Computer speichern und so lange probieren, bis du fit bist.

  Weitere Hilfe gibts sicher bei Google oder in einem HTML/CSS Forum.

  Grüße, Alex

  in2code.de - Wir leben TYPO3
  - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
  - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

• Schengo
  T3PO

  0 x

  26	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  09. 08. 2007, 22:34

  Ich bin etwas weitergekommen, habe aber immernoch ein Problem mit der Darstellung.

  Ich habe das Menü mal unter [url=http://www.die-supahelden.de/test/menu/index.html]http://www.die-supahelden.de/test/menu/index.html[/url] online gestellt.

  Die erste und zweite Ebene ist jetzt horizontal, aber nicht die dritte und vierte. habe schon etwas mit dem CSS-Befehl clear versucht, aber nicht erfolgreich.

  Ausserdem habe ich unterschiedliche Betrachtungweisen im IE und Firefox. Kann es am padding liegen? Hat jemand eine Idee?

  Hier nochmal der Quellcode (index.html)
  [HTML]<html>
  <head>
  <title>Test Menü</title>
  <script src="jquery-1.1.2.js" type="text/javascript"></script>
  <script src="jquery.bgiframe.js" type="text/javascript"></script>
  <script src="jquery.dimensions.js" type="text/javascript"></script>
  <script src="jquery.jdMenu.js" type="text/javascript"></script>
  <script type="text/javascript">
  // Initialization, you can leave this here or move this somewhere else
  $(function(){
  $('ul.jd_menu').jdMenu({ onShow: loadMenu
  //onHideCheck: onHideCheckMenu,
  //onHide: onHideMenu,
  //onClick: onClickMenu,
  //onAnimate: onAnimate
  });
  });
  function onAnimate(show) {
  //$(this).fadeIn('slow').show();
  if (show) {
  $(this)
  .css('visibility', 'hidden').show()
  .css('width', $(this).innerWidth())
  .hide().css('visibility', 'visible')
  .fadeIn('normal');
  } else {
  $(this).fadeOut('fast');
  }
  }
  var MENU_COUNTER = 1;
  function loadMenu() {
  if (this.id == 'dynamicMenu') {
  $('> ul > li', this).remove();
  
  var ul = $('<ul></ul>');
  var t = MENU_COUNTER + 10;
  for (; MENU_COUNTER < t; MENU_COUNTER++) {
  $('> ul', this).append('<li>Item ' + MENU_COUNTER + '</li>');
  }
  }
  }
  function unloadMenu() {
  if (MENU_COUNTER >= 30) {
  MENU_COUNTER = 1;
  }
  }
  // We're passed a UL
  function onHideCheckMenu() {
  return !$(this).parent().is('.LOCKED');
  }
  // We're passed a LI
  function onClickMenu() {
  $(this).toggleClass('LOCKED');
  return true;
  }
  </script>
  <link rel="stylesheet" href="jdMenu.css" type="text/css" />
  <link rel="stylesheet" href="jdMenu.slate.css" type="text/css" />
  <style type="text/css">
  body {
  margin: 0px;
  padding: 25px;
  font-family: sans-serif;
  font-size: small;
  }
  h1 {
  font-family: sans-serif;
  color: #0068B8;
  }
  
  li.LOCKED {
  font-weight: bold;
  }
  body {
  margin: 0px;
  margin-left: 15px;
  }
  </style>
  </head>
  <body>
  <ul class="jd_menu jd_menu_slate">
  <li>Item One
  <ul>
  <li>Item One
  <ul>
  <li>Item One
  <ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li>Item Four</li>
  <li>Item Five</li>
  </ul>
  </li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li>Item Four</li>
  <li>Item Five</li>
  </ul>
  </li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li>Item Four</li>
  <li>Item Five</li>
  </ul>
  </li>
  <li>Item Two
  <ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li>Item Four</li>
  <li>Item Five</li>
  </ul>
  </li>
  <li>Item Three
  <ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li>Item Four</li>
  <li>Item Five</li>
  </ul>
  </li>
  </ul>
  </body>
  </html>
  [/HTML]

  jdmenu.css
  [HTML]ul.jd_menu {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  }

  ul.jd_menu ul {
  display: none;
  }

  ul.jd_menu li {
  float: left;
  }

  /* -- Sub-Menus -- */
  ul.jd_menu ul {
  position: absolute;
  display: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  z-index: 10000;
  }

  ul.jd_menu ul li {
  float: left;
  margin: 0px;
  }

  ul.jd_menu ul {
  position: absolute;
  display: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  z-index: 10000;
  }

  ul.jd_menu ul li {
  float: left;
  margin: 0px;
  }[/HTML]

  jdmenu.slate.css
  [HTML]ul.jd_menu_slate {
  height: 19px;
  clear: both;
  }

  ul.jd_menu_slate ul li a,
  ul.jd_menu_slate ul li a:active,
  ul.jd_menu_slate ul li a:link,
  ul.jd_menu_slate ul li a:visited {
  color: #000000;
  }

  ul.jd_menu_slate li {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight:bold;
  padding: 2px 5px 4px 5px;
  cursor: pointer;
  white-space: nowrap;
  color: #000000;
  }

  ul.jd_menu_slate li.jd_menu_active_menubar,
  ul.jd_menu_slate li.jd_menu_hover_menubar {
  color: #FF0000;
  }

  ul.jd_menu_slate ul li {
  padding: 3px 10px 3px 5px;
  color: #000000;
  }

  ul.jd_menu_slate ul li.jd_menu_active,
  ul.jd_menu_slate ul li.jd_menu_hover {
  color: #FF0000;
  }
  [/HTML]

• 1

• Zurück