Hello.
I’m currently trying to make my first live ModX site and I love playing arund with it.
One thing makes my head spin though and thats the menu part.
I want to use the menu seen here
http://www.muddydogpaws.com/development/wayfinder/examples/example-7.html(Or a slightly modified version) But I can’t understand how this works and I have been sitting here for three hours now.
What I’ve done so far:
Created a simple template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[*pagetitle*] | </title>
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<base href="[(site_url)]"></base>
<link rel="stylesheet" type="text/css" href="assets/templates/template1/main.css" />
<link rel="stylesheet" href="assets/templates/template1/modxmenu.css" type="text/css" media="screen" />
<script src="[(base_url)]manager/media/script/mootools/mootools.js" type="text/javascript"></script>
<script src="[(base_url)]assets/templates/modxhost/drop_down_menu.js" type="text/javascript"></script>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<IMG SRC="assets/templates/template1/images/log.jpg" WIDTH="946" HEIGHT="120" alt="Topimage">
</div>
<!-- End Header -->
<!-- Begin Naviagtion -->
<div id="navigation">
[[Wayfinder? &startId=`0` &level=`3` &parentRowTpl=`cssplay_revParentRow` &cssTpl=`cssplay_ultdrop`]]
</div>
<!-- End Naviagtion -->
<!-- Begin Content -->
<div id="content">
<h2>[*longtitle*]</h2><br>
[*#content*]
</div>
<!-- End Content -->
<!-- Begin Footer -->
<div id="footer">
<CENTER>Footer</CENTER>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
My css file looks like this
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-repeat: repeat-x;
background-color: #c4c4c4;
background-image:url(images/bg.jpg);
}
#wrapper {
margin: 0 auto;
width: 947px;
}
#header {
width: 947px;
color: #FFFFFF;
padding: 10px;
border: 1px solid #c0c0c0;
height: 120px;
margin: 0px 0px 0px 0px;
background: #FFFFFF;
}
#navigation {
width: 947px;
color: #FFFFFF;
padding: 10px;
border: 1px solid #c4c4c4;
margin: 0px 0px 0px 0px;
background-image:url(images/menubg.jpg);
}
#content {
width: 947px;
color: #333;
border: 1px solid #c0c0c0;
background: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 100%;
}
#footer {
width: 947px;
height: 12px;
background-color: #FFFFFF;
background-repeat: repeat-x;
background-image:url(images/adr_repeat.jpg);
margin: 0px 0px 0px 0px;
padding: 10px;
}
/* headers */
h1 {
margin-top:-10px;
font-size:3.4em;
text-align:right;
color:#000000;
}
h2 {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#000000;
}
h3 {
font-size:1.3em;
font-weight:bold;
color:#000000;
border-bottom:1px solid #c4c4c4;
}
/* paragraphs */
p {
margin:2px 0 15px 0;
line-height:1.3em;
}
/* links */
a {
color:#000000;
text-decoration:none;
border-bottom:1px solid #c4c4c4;
}
a:hover {
background-color:#c4c4c4;
}
/* lists */
ul, ol {
margin:0 0 5px 30px;
}
This is not completely done yet.
I have also created 2 chunks
cssplay_revParentRow
<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
<!--[if lte IE 6]>
<a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
<table><tr><td>
<![endif]-->
[+wf.wrapper+]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
And
cssplay_ultdrop
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/ultimate_drop.css" />
Now as far as I can see this looks ok, but my menu turns out totally wrong as you can see on the attached image.
Can anyoneplease help out a newbie on this one.
Kind regards
Michael
☆ A M B ☆
