CSS Menu

Hey,
Having never realy bothered with CSS before excpt for some simple a.hover stuff I am having a problme with the menu.
http://www.dukinfieldoldchapel.org.uk

My issue is I want the items in the folder to not appear until you have selected the folder.

ie
Menu 1
Menu 2
Menu 3
  > Subitem 1
  > Subitem 2
      > item2 sub

The subitem’s do not apear until you have clicked menu 3 (this needs to happen with 2 levels)

if this is not possable I have been trying to get the submenu items to appear as a diffrent colour when they are selected.
Here is my CSS

#sideMenu    {  font-family: Verdana; font-size: 10pt; }
#sideMenu ul { list-style-type:none; font-family:Verdana; font-size:10pt; text-align:left; text-indent:0; margin-left:6; margin-right:2 }
#sideMenu a { font-family: Verdana; text-decoration: none;  color: #000000; font-size:10pt; margin-top:5; margin-bottom:5 }
#sideMenu a:hover { font-family: Verdana; text-decoration: underline;  color: #000000; font-size:10pt;  }
#sideMenu li.here { font-family: Verdana; color: #000080; font-size:10pt;  }
#sideMenu dt.here { font-family: Verdana; color: #000080; font-size:10pt;  }
-->

Anyone any help?

Also noticed Netscape and Firefox indent the menu alot more than Internet explorer and even Opera.
Whay cant they all follow standards!!! >:( - but thats another discussion altogether!

Replace the [X] in margin-left with a number (positive or negative). this will be the indentation on your sub menu’s.
-sD-
scotty Delicious

Thats Fantastic! Thank you very much!

Two more things
Am using front page which as we all know follows no standards other than IE. I was using this to edit the syle to reduce the indent caused by the list.. this looks bad on firefox and netscape as they still have the large indent... how to you remove the indent from a list altogether?
Also how do you change the style of the current page within the sub menu.

change this:


to this:


some things to consider;
if the font-family for your site is the same throughout, you might want to declare it in
html, body {
     font-family:Verdana;
}
that way, you don’t have to declare it in every section.

If you get your page to display correctly in FireFox, Safari, Netscape, Konquere, etc... but it continues to display incorrectly in IE, try a "Conditional Comment.

<!--[if IE]>
<style>
#sideMenu ul { margin-left:6px;}
</style>
<![endif]-->
this gives IE special style instructions specified between the [if] tags.  All other browsers skip over this as they regard it as a standard HTML comment, with no structural information. More on Conditional Comments.

One last thing.  Have you tried NVU? It is a free WYSIWYG HTML editor from the folks at mozilla. you can get it here:
http://www.nvu.com/

I hope this helps.

-sD-

Fantastic - and its starting to make sence - however based on what I think I know

should mean the selected sub menu is in purple but at the moment is just in bold

goto http://www.dukinfieldoldchapel.org.uk click on rites of passage then weddings to see what I mean

Thanks for the help by the way, is helping me alot - and have downloaded nvu - see how it goes!

Try adding this line right after #sideMenu dt.here --



what you have tells the browser to make the active link purple and bold. the dt.here li style tells the browser how lists following dt.here should be styled. In the case of the code above, it will make the list purple and bold. The Font family and size are inherited because it is a cascading style sheet.

-sD-

I think I see what you are saying however it dosent seem to be working. it shows the list of the sub menu in bold (and I beleve this is because its taking the style from the menu header. Its still not making the current item puple.
Also the Indent of the sub items has gone (again I think its taking this from the main list style)
Am trying to get my head arround the whole thing so thanks for being patient and taking the time to help.

my current style is (tried to tidy it up)

Honestly nidave, I have just recently started learning CSS.  I said some things to the authors of some snippets that I probably wouldn’t have if I knew CSS.  I am learning, however, and I will pass along to you the advice that I got from Ryan Thrash, one of the founders of MODx (ouch!!! I just droped a name and it landed on my toe!).

Quote from: rthrash at Oct 30, 2005, 03:37 PM

Now you’re getting into the finer points of CSS-based styling. Simply because you’re trying to do things that might not at first be apparent how to accomplish does not make it "buggy". Unfortunately, CSS techniques are not somehting that can be learned quickly because of differences in CSS rendering between the browsers.

To skip a whole  lot of stuff that comes after this paragraph: If a table + JavaScript menu system works best for you, then by all means, use that! CSS layouts are a challenge that take time to master. There really are no shortcuts.

Now down to the examples you ask about... There are a ton of great tutorials on styling unordered lists into usable navigation systems (and other CSS stuff in general), including all the fun "gotchas" to look out for with the various browsers (mostly IE and Opera, but "mostly IE" means the majority of the internet ... mostly).

Since MODx is more about the tool than it is about the techniques, we like to not to reinvent tutorials that are already well written and available. Review, study, learn and gain 100% comprehension of what’s going on with the following tutorials and you’ll be well on your way to a good start:

http://css.maxdesign.com.au/selectutorial/
http://css.maxdesign.com.au/listutorial/
http://www.maxdesign.com.au/presentation/wentworth/index.cfm
http://positioniseverything.net/css-flyout.html
http://positioniseverything.net/css-dropdowns.html
http://www.maxdesign.com.au/presentation/tame/
http://css.maxdesign.com.au/listamatic/
http://css.maxdesign.com.au/listamatic2/
http://positioniseverything.net/articles/onetruelayout/

Figuring out how to make really clean, semantic, efficient layouts is tough and frustrating as all get out. It’s one of those things you beat your head against for weeks or months... then things all of the sudden start to click. You’ll go back and look at all this mess of code you did on older stuff and realize you can replace it much more simply in about half the code (or less!).

You start needing fewer and fewer non-semantic elements. You learn to become one with the dark side (IE Win), to ignore the cruel joke that is IE Mac and ancient Navigator versions, and what works easily and what’s going to take some "serious doin’ to do" in CSS. Getting CSS layouts right is an art form that takes time (lots of it, too), patience (lots of that, too), failure (even more of that) and practice (an infinite amount at first, then only a ton when you know what’s going on).

To paraphrase Mark Twain (I think) when writing a letter to a friend, "Forgive the length of this letter for I have not the time to write a short one." Same thing applies with MODx. For now, we’re putting the advanced stuff in there and making it so power-users can really make it sing. We will one day be as bullet-proof a solution as any out there, but for now, we cannot be all thigns to all people.

So for now, some things might be a bit complex, or advanced or not totally intuitive. That’s a choice. We can’t provide a truly robust and powerful solution that serves the dev teams’ needs (remember, we’re not getting paid to produce a consumer-grade commercial application), while simultaneously paring it down to a super-simple solution chock full of set up wizards. We have to build it up before we can scuplt it into an even more svelt machine. Given time, we’ll get there though. We’re working hard at it now.

The links provided above, as well as downloading completed templates from the MODx [Template] forum and disecting and learning from them, helped me to gain a basic, yet working knowledge of CSS. It’s can be complicated, but it is clean and it’s the correct way to style HTML.

Thanks for the reply - have been loking at those sites - This is the first time I have ever tried to do anything more complicated than a.hover before.

Thanks for the help and the links. (and the e-mail) amgoing to see if I can figure it out (this is a great learining evercise)

I probably will be back with more questions!