Zum Inhalt springen

Menüs basierend auf CSS

Erstellt am 7. März 2006 · 136 Antworten · letzte Antwort am 16. November 2006 · Seite 7 von 7

Tags: HTML & CSS, Tipp

d_designer ·

ich habe auch noch das menue aber wie gesagt geht nur sauber unter iE
vieleicht kannst du mir da noch was zu sagen

seite = PAGE
seite.bodyTag = <body bgcolor='#EAF5FB' border='0' leftmargin='0' marginheight='0' marginwidth='0' margintop='0' bottommargin='0'>
seite.meta.http-equiv="imagetoolbar" content"no">
seite.stylesheet = fileadmin/styles/styles_css.css
seite.typeNum = 0
seite.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php
seite.10 = TEMPLATE
seite.10 {
	template = FILE
	template.file = fileadmin/template3_css.htm
	WorkOnSubpart= DOKUMENT
	marks.INHALT < styles.content.get
	marks.HINTERGRUND < styles.content.getLeft
	marks.INHALTEN < styles.content.getRight
	marks.INHALTE < styles.content.getBorder
	

 #navi#################################################
  	  	marks.NAVI = HMENU
  	marks.NAVI.1 = TMENU_LAYERS  
  	marks.NAVI.1 {  	
  			layerStyle = position:absolute;left:0px;top:35;width:10px;VISIBILITY:hidden;
  			xPosOffset = -1
    			lockPosition = 200
  			hideMenuWhenNotOver = 1
			expAll = 1
			leftOffset = 0
   			topOffset = 80
   			relativeToTriggerItem = 1
   			NO { 
			allWrap = <span class="eins">|</span>
  			ATagParams=class="eins" 			   			       			     
  			  }	
  		      }
  	marks.NAVI.2 = TMENU_LAYERS
  	marks.NAVI.2 {
  		     layerStyle = position:absolute;top:35;width:1px;left:0px; VISIBILITY:hidden;
  			xPosOffset = -100
   			lockPosition = 200
  			hideMenuWhenNotOver = 1
			expAll = 1
  			leftOffset = 310
   			topOffset = 90
   			relativeToTriggerItem = 1
  			NO { 
			allWrap = |
  			ATagParams=class="zwei" 
  			}
	
			}  	  		     
  marks.NAVI.3 = TMENU_LAYERS
  	marks.NAVI.3 {
  			layerStyle = position:absolute;left:0px;top:100;width:100px;VISIBILITY:hidden;
  			xPosOffset = -500
    			lockPosition = 100
  			hideMenuWhenNotOver = 1
			expAll = 1
  			leftOffset = 90
   			topOffset = 1
   			relativeToTriggerItem = 1
  			NO { 
			allWrap = |
  			ATagParams=class="drei" 
  			} 

	
			}
d_designer ·

meinst du bei der includeLibs??
Also eigentlich gibt es kein ###MENU### nur ein ###MENUE### wie in meinem beispiel. Jetzt bin ich ein wenig verwirrt

just2b ·

sry auch meine Schuld. du schreibst im vorigen Bsp:

marks.NAVI = HMENU
marks.NAVI {

gibt es ein ###NAVI### in deinem Template? wenn nein, dann machen!

just2b ·
wunschtacho schrieb

Nochmal mein Senf:
Klasse Sache!

jo danke 😉 leider wenig Zeit mehr dem zu widmen und auszubauen...

wev ·

Halli Hallo

Ich versuche das horizontale menu auch auf meiner Seite einzubinden und muss Dir an dieser Stelle ein großes Lob und meinen Dank aussprechen.

Nur habe ich ein Problem: Im Firefox funzt alles wunderbar. Aber im Internet Explorer zeigt es mir nur die horizontalen Menüpunkte an, die Untermenüs aber nicht. Ich mache das ganze mit Templavoila, aber das sollte ja nicht das probl. sein.

Java habe ich eingeschaltet, und im HTML Template eingebunden, hier mein Code:

<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test</title>

<link rel="stylesheet" type="text/css" href="styles/horizontal_CSS.css" media="screen" />

<script type="text/javascript" src="fileadmin/horizontal_JS.js"></script>

</head>
<body>
<div id="container"><div id="nav">menu</div>
<div id="main"></div>
</div>
</body>
</html>

und hier das css:

* {
margin: 0; 
padding: 0;
}
body {
	font: 95% Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-align: center;
	background-color: #97CFE6;
}
#container {
text-align: left;
position: relative;
background: transparent;
margin: 0 auto;
border-left: 1px solid #333;
border-right: 1px solid #333;
}
#nav, #nav ul {
	float: left;
	width: 86em;
	list-style: none;
	line-height: 1em;
	background: white;
	color: #000;
	font-weight: bold;
	padding: 0;
	border: solid #eda;
	border-width: 1px 0;
	margin: 0 0 1em 0;
}
 
#nav a {
	display: block;
	width: 10em;
	color: #7C6240;
 
	text-decoration: none;
	padding: 0.25em 0em;
}
 
#nav a.menuparent  {
	background: url(arrow.gif) no-repeat 90% 40%;
}
 
#nav li {
	float: left;
	padding: 0;
	width: 10em;
}
 
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14em;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
		
}
 
#nav li li {
 
	width: 14em
}
 
#nav li ul a {
	width: 14em;
	padding-left: 1em;
}
 
#nav li ul ul {
	margin: -1.75em 0 0 14em;
}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}
 
#nav li:hover, #nav li.sfhover {
	background: #eda;
	color: white;
}

und hier das menü Template TS:

lib.MENU = HMENU
lib.MENU {
	special = directory
	special.value = 850

	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB
	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}

und das ist das Haupt TS:

constans


# Limitation of picture widths in main content column:
styles.content.imgtext.maxW = 600

# Setting link targets to nothing (no frames mode)
PAGE_TARGET = 
content.pageFrameObj = 

# Making sure each line in image captions (of Image content elements) are applied to corresponding image number in the element:
styles.content.imgtext.captionSplit = 1

setup:

config.spamProtectEmailAddresses = 1

page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

page {
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/xxxxx.js"></script>
}

kann jemand bitte helfen?

wev ·
just2b schrieb

wird das js wirklich eingebunden?

Weiss ich nicht so genau. Aber im Fire Fox wird das Menü angezeigt, wie ich es erwarte und im IE nicht. Was müsste ich denn anders machen oder wie kann ich es testen ob das JS greift. Wie müsste ich es im TS vom templavoila einbinden?

Im TS habe ich noch einen fehler gepostet in Zeile 4 bei lib.Menu heisst es bei mir 3 nicht 850. Sonst käme ja sowieso nichts weil es die Seiten ID 850 noch nicht gibt.

Im IE habe ich ja JS eingeschaltet...

Gruss Vik

wev ·

Hallo

man o man, vielen Dank für den Tip. Im Quellcode wird halt ein anderer Pfad angezeigt darum findet der Browser halt die Datei nicht.

Den Pfad zum *.js korrigiert, und siehe da es funzt, wunderbar.

Wenn ich hier den ganzen Thread lese hatten andere das selbe problem. Tja es geht halt nicht, wenn man nur die codes kopiert, die Dateipfade sollten halt schon auch stimmen. Muss ich mich selber an der Nase nehmen.

Also nochmals vielen Dank.

Vik

freyherr ·

Hallo,

ich versuche zwei vertikale Menüs einzubinden. Der Firefox macht es. der IE mal wieder nicht. Hat jemand von euch Erfahrungen, Tipps?

Viele Grüße und besten Dank für jede Anmerkung

Peter

just2b ·

sthet wohl auch schon 10x im Thread: javascript nicht eingebunden, oder du hast was beim TS beim IFSUB umbenannt...

georg