Spry Menu Problem

Hi all, been a while since I have attempted anything like this, and I’m a stumbler, I have very little knowledge about this, but can throw things together to look how I want, but not the way you guys can, so I am trying to create a better site than I can manage normally, so all pointers are welcome.

I dare say I will be having numerous issues as I get deeper, but for the moment it’s a menu I am struggling with, I have got so far with this, but now can’t seem to see whats wrong, not sure if there is a limit to how many sub menu’s you can have, I added some just fine, but using the same method I am failing.

I have a vertical Spry menu, within that I have sub menus, and even some of those have sub menu’s, I got this far by copying the succesful parts of the menu, but now I am trying to add more sub menu’s, but am failing miserably, instead of creating the new sub menu, it is making it dissapear, the code is what I have, hopefully you will see what I’m trying to do, and be able to guide me as to whats wrong.

<ul id="MenuBar1" class="MenuBarVertical">
  <li>
    <a class="MenuBarItemSubmenu" href="#">Maintenance</a>
      <ul>
        <li><a href="#">Junk File Cleaners</a>
        <ul><li><a href="#">ATF-Cleaner</a>
        <li><a href="#">CCleaner</a>
        <li><a href="#">Disk Cleaner</a>
        </ul>
      <ul>
        <li>
    <a class="MenuBarItemSubmenu" href="#">Defragging</a></>

        <li><a href="#">IObit SmartDefrag</a>
        </ul>
        <li><a href="#">Secunia PSI</a></li>
      </ul>
    </div>

Hi,
Maybe it’s a typo, but in the code snippet you provided, this:

<a class="MenuBarItemSubmenu" href="#">Defragging</a></>

should be this:

<a class="MenuBarItemSubmenu" href="#">Defragging</a></li>

i.e. you weren’t closing the li tag properly.

In fact, on closer inspection, your complete markup looks pretty shot.
It should be more like this:

<ul id="MenuBar1" class="MenuBarVertical">
  <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
    <ul>
      <li><a href="#">Junk File Cleaners</a>
        <ul>
          <li><a href="#">ATF-Cleaner</a></li>
          <li><a href="#">CCleaner</a></li>
          <li><a href="#">Disk Cleaner</a></li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li><a class="MenuBarItemSubmenu" href="#">Defragging</a>
    <ul>
      <li><a href="#">IObit SmartDefrag</a></li>
      <li><a href="#">Secunia PSI</a></li>
    </ul>
  </li>
</ul>

Sorry for a slow reply, never got a notification of one, anyway it doesn’t surprise me to hear that, I was simply using the original code, duplicating it to create the same thing in further menu’s, got a working result up to half way, but then it simply stopped allowing any kind of editing without making the layout mess up etc.

But to cover things a bit at a time, you comment on the </li> tag(s) missing, in that instance it was a typo, but in the final attempts (not shown here) I had done that on purpose, I’m sure when I was last helped here on a different project that it was said that in using CSS you didn’t need to close every time, a single close could act for all of them, or am I getting mixed up somewhere ?

Now just to get this sorted in my head, am I right in thinking that the following code is used once only (each main menu anyway), to tell it there is a menu ?

<ul id="MenuBar1" class="MenuBarVertical">

And that the following code is used when you want to have another menu options part come out ? And this needs to be used on every heading you want further menu options to appear from ?

<a class="MenuBarItemSubmenu" href="#">

eg I am looking at opening Maintenance to Junk File Cleaners to 3 specific cleaners, would I need that code by each of the preceding headings ?

I had tried adding the second code with some success, but I found it only worked so many times, is there a limit for the amount of times you can use such codes in a menu ?
Basically I’m looking (currently anyway) to have 4 menu options, each opening to between 3 and 5 options, and some of those to open out yet again to another say 3 or so options, is there a technical wouldn’t be achievable ?

I am going to have a play with this to see if I can get on better than my last attempt, but I take it all items under a menu have to be set as <ul> ?
Just wondering what different code would mean.

Thanks for the help.

No problem, you can set your Default Thread Subscription Mode in your profile > Settings > General Settings.
Alternatively, you can use the Thread Tools dropdown at the top of each thread to subscribe or unsubscribe from it.

You’re getting mixed up. There are certain HTML tags which don’t need closing under certain circumstances, e.g. <img> in HTML (as opposed to XHTML), but in general if you open a tag, you have to close it.

Exactly! In it’s basic form, the menu is nothing more than an unordered list (<ul>), with a unique id, in this case “MenuBar1”.

Not quite. A <li> tag is used to create a top-level menu item. E.g.:

<li><a href="#">Element 1</a></li>

The class of “MenuBarItemSubmenu” denotes that this menu item has further sub-menu points and is used to add some CSS styling as such.

Perhaps it would help to walk through a simple example and build it up to something more complicated:

Your basic vertical Spry menu with four top-level menu points looks like this:

<ul id="MenuBar1" class="MenuBarVertical">
  <li><a href="#">Element 1</a></li>
  <li><a href="#">Element 2</a></li>
  <li><a href="#">Element 3</a></li>
  <li><a href="#">Element 4</a></li>
</ul>

So, let’s add a second layer of navigation to point two:

<ul id="MenuBar1" class="MenuBarVertical">
  <li><a href="#">Element 1</a></li>
  <li>
    <a class="MenuBarItemSubmenu" href="#">Element 2</a>
    <ul>
      <li><a href="#">Element 2.1</a></li>
      <li><a href="#">Element 2.2</a></li>
      <li><a href="#">Element 2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Element 3</a></li>
  <li><a href="#">Element 4</a></li>
</ul>

Can you see what’s gone on there?
Within the second top-level <li> element, I have added a <ul> element, which itself has three <li> elements.
This represents the second layer of your navigation.

So, let’s build on this and a second and a third layer of navigation to point four:

<ul id="MenuBar1" class="MenuBarVertical">
  <li><a href="#">Element 1</a></li>
  <li>
    <a class="MenuBarItemSubmenu" href="#">Element 2</a>
    <ul>
      <li><a href="#">Element 2.1</a></li>
      <li><a href="#">Element 2.2</a></li>
      <li><a href="#">Element 2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Element 3</a></li>
  <li>
    <a class="MenuBarItemSubmenu" href="#">Element 4</a>
    <ul>
      <li>
        <a href="#">Element 4.1</a>
        <ul>
          <li><a href="#">Element 4.1.1</a></li>
          <li><a href="#">Element 4.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Element 4.2</a></li>
      <li><a href="#">Element 4.3</a></li>
    </ul>
  </li>
</ul>

Here I have done the same as above. Within the fourth top-level <li> element, I have added a <ul> element.
Within this <ul> element’s first <li> element, I have added a further <ul> element. This represents the third layer of navigation.

Hopefully, this gives you some insight into what’s going on.
If you have any more questions, just let me know.

Yes I know about subscribing, and by default when you post you are subscribed, but I will double check under your guide (Thanks for that), but again no notification of this one, but the thread tag shows me as subscribed (only offers to unsubscribe).

I’m not surprised I’m mixing things up, I have the attention span of a goldfish at times but as with anything the more you do it the more it sticks, but I am a long way from understanding, but I can follow some things and apply logic (it works sometimes) to get kinds of results, but no where near what you guys could do.

Now the <li> tag, I was way off with that, I thought it simply meant it was a new line, nothing to do with menus, not directly anyway.
The <ul> tag I understand is in relation to a specific type of list (unordered), and the href part, well I’d be lying if I said I understood, but I see it’s use
eed in mentioning a specific point to get it showing on a web page.

The html examples you give I see very clearly whats going on, and thats what I was trying to emulate, but kept failing, each time I got so far, adding the next bit either put the page out, or made other bits of the menu disappear, and I just couldn’t see what I was doing wrong, probably just a mass of text making me go blind lol, but that was exactly wheat I was trying to do, albeit badly.

Now the sub menu heading, I think I am right in my thinking, but probably didn’t say it clearly, bit without that the menu wont show the parts you want to show within that sub heading, so from what I can draw from this, I wasn’t to far off the mark in my understanding, although I probably didn’t come across clearly enough with it, but somewhere between my brain and my typing something kept going wrong lol.

Anyway, I came across an automated way to do what I was trying to do, I found showing the right tab made it’s elements visible, then I was able to just change headings etc in there, and it came out a treat, for me anyway, not sure if you’d agree but it does what I wanted now, I just have to mess around with colours and text size now, fortunately thats much easier than this was, but here is my current list:-

<ul id="MenuBar1" class="MenuBarVertical">
  <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
    <ul>
      <li><a href="#" class="MenuBarItemSubmenu">Junk File Cleaners</a>
        <ul>
          <li><a href="#">ATF-Cleaner</a></li>
          <li><a href="#">CCleaner</a></li>
          <li><a href="#">Disk Cleaner</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Defragging</a>
        <ul>
          <li><a href="#">Auslogics Disk Defrag</a></li>
          <li><a href="#">IObit SmartDefrag</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Updating</a>
        <ul>
          <li><a href="#">Secunia PSI</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#" class="MenuBarItemSubmenu">Protection</a>
    <ul>
      <li><a href="#" class="MenuBarItemSubmenu">Antivirus</a>
        <ul>
          <li><a href="#">Avast! Free Antivirus</a></li>
          <li><a href="#">Microsoft Security Essentials</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Anti-Spyware</a>
        <ul>
          <li><a href="#">Emsisoft Anti-Malware</a></li>
          <li><a href="#">Malwarebytes Anti-Malware</a></li>
          <li><a href="#">SUPERAntiSpyware</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Hosts</a>
        <ul>
          <li><a href="#">Hosts File</a></li>
          <li><a href="#">SpywareBlaster</a></li>
        </ul>
      </li>
      <li><a href="#">WinPatrol</a></li>
    </ul>
  </li>
  <li><a class="MenuBarItemSubmenu" href="#">Safe Surfing</a>
    <ul>
      <li><a href="#">General Tips</a>      </li>
      <li><a href="#">SiteAdvisor</a></li>
      <li><a href="#">WOT</a></li>
    </ul>
  </li>
  <li><a href="#" class="MenuBarItemSubmenu">Extra Tools</a>
    <ul>
      <li><a href="#">Belarc Advisor</a></li>
      <li><a href="#">Flash Disinfector</a></li>
      <li><a href="#">Iconix</a></li>
    </ul>
  </li>
</ul>

Many Thanks for this, I was on the right kind of track, I just got a bit lost, now comes the bigger battle, adding the main content and have it place where I want it.

Hi there,

I’m glad you got it working. Your code looks pretty spot on now. Well done!

The only thing I can think of here, is that if you get one email notification, you won’t get any more until you click on the link in that email, that takes you to the thread. Could that maybe be the problem?

This is important. Contained within the <li> tag is an <a> tag (anchor tag). The href attribute of the <a> tag specifies the address of the page the link goes to.
It can either be absolute, e.g.:

<a href="http://www.sitepoint.com">Click here to visit Sitepoint</a> 

Or it can be a relative path to another page on your site, e.g.:

<a href="./contact/contact.html">Click here to visit our contact page</a> 

There are other variations on this, but in your case, the second version will probably be most useful.

If you want to read more about the humble <a> tag, check this out: http://reference.sitepoint.com/html/a

Still no notification, will try logging out then back in, got a vague memory of that working on occasions for some forum issues, but it’s set to instant notifications in my settings, currently all I get is the top of the web page saying I have got x notifications.

I wish I could say I did that coding, but alas, I simply found a way to expose a menu to allow me to do that easily, but it took me a few hours to find how to change the text area size so it fitted inside the text areas, yet earlier I stumbled on it easily lol, but another few dozen more rebuilds of this so far, and I will get to see what certain functions can do to change parts of it.
But your html examples (the latter of them) is exactly what I will be doing, and I’m glad to say thats the one bit I can manage easily lol.

My next battle is to make the page so it shows that way on ALL other pages, from memory you can make it so only the content of the main body changes, speeding up load times, or am I getting mixed up again ?

Many Thanks for this, 1 battle down, several more to go lol. :nono::lol:

Although this is technically possibly, it’s normal for you to repeat the navigation code on each page of your site.
There are (at least) two reasons for this:

  1. You normally want to give the user some idea of where they find themselves within the menu hierarchy, e.g. by highlighting the currently selected menu item.
  2. If you are using relative paths (e.g. …/contact/contact.html), then the paths to the various pages from within the navigation will be different from every page.

Yes, it’s better to use “root relative” paths, such as href="/contact/" so that the same menu code will work on all pages. And the ideal is to store the menu code in one place and “include” it onto each page via a PHP include or similar.

[ot]

For some reason, the notification system occasionally stops sending e-mails to a particular address. It’s nothing personal (I hope - because it’s doing it to me for the second time :)). If you send a PM to @HAWK, she should be able to sort it out for you.[/ot]

Hi Ralph,

I have two questions to what you wrote:

This is untenable on your local machine, as Windows at least, will consider your document root to be C:/ and not whatever folder you are actually working in. Therefore <a href="/contact/"> will always lead you to file:///C:/contact/. Do you know of any way around this problem (apart from obviously working in C:/)?

In this case how would you go about highlighting the page within the current navigation hierarchy upon which the user currently finds themselves?

Something like this, perhaps:

<?php $currentPage =  basename($_SERVER['SCRIPT_NAME']); ?>
<ul>
	<li <?php if ($currentPage == 'index.php') {echo 'class="selected"';} ?>><a href="index.php">Home</a></li>
	<li <?php if ($currentPage == 'prog.php') {echo 'class="selected"';} ?>><a href="prog.php">Festival Programme</a></li>
	<li <?php if ($currentPage == 'events.php') {echo 'class="selected"';} ?>><a href="events.php">Other Events</a></li>
	<li <?php if ($currentPage == 'reports.php') {echo 'class="selected"';} ?>><a href="reports.php">Past Events</a></li>
	<li <?php if ($currentPage == 'info.php') {echo 'class="selected"';} ?>><a href="info.php">Useful Information</a></li>
	<li <?php if ($currentPage == 'contact.php') {echo 'class="selected"';} ?>><a href="contact.php">Contact</a></li>
</ul>

Ah, with you. That makes sense.
Thanks!

Yes, it’s the same on Mac. But the easy way around it is to set up a virtual server on your computer, using XAMPP (PC) or MAMP (Mac). It only takes a few minutes to set up, and then you can set everything up just as you would online. :slight_smile:

In this case how would you go about highlighting the page within the current navigation hierarchy upon which the user currently finds themselves?

You can do it with PHP in various ways one of which TB posted above), with CSS, or with JavaSCript. Here is a thread listing a few solutions:

Thanks Ralph, as obvious as that is, I’ve never really considered doing that for a project involving just static HTML files (as opposed to a project using say, WordPress)
I’ll give that some thought.

Yep, it works nicely for both static sites and sites using a CMS like WordPress. It’s handy because it means you can develop the whole thing locally and then upload when you’re ready. Of course, you can just install PHP, Apache, MySQL etc. on your PC as well, but it’s much quicker to use a package like those I mentioned.

I thought it would be worth it as it speeds up loading pages, each page would have a heading on it so they would know what page they are on, but I will just create a page as a template then each new page add the content then save as to save having to do it fresh each time, it’s what I used to do anyway, just thought it was worth looking at this possibility.

I’m struggling to understand up to this point, but your advice (as great as it probably is) is way over my head, I fear I have a way to go before getting even close to the methods you suggest, I just hope one day to be able to use such info, but Thanks for the input.

I will try changing email addresses to see if that cures it, if it doesn’t then I will follow your advice, Thanks.

Thanks for the input all, I hope to get to grips with it one day, for now I will do my best to follow the advice.

Great stuff I can post again lol, Thanks to Hawk for sorting the account for me. :cool:

Right several dozen rebuilds and I have got what I hope is a good handle on it now, still way off understanding as such, but hopefully I’m starting to pick it up a bit, enough to be moving forward a bit anyway, so I have been trying to get the banner showing correctly, as it seems to move to the left when viewing via different screens, even though I set it to centre, I have also been struggling with adding a main content div, I’ve managed to get a semi reasonable result after many attempts, but it’s still not right.

The first battle was placing it, the only way I finally got it to position to the right of the menu was to drag and drop it, prior to that it was either adding into the menu, or starting down under the menu, so tips on how to approach placing these things would be great, as I know there is a more correct way to do it, but no matter how I tried to place the cursor on the page to locate the insertion point, it never went where I wanted (to the right of the menu), I just hope I can follow it when you guys explain it lol, but please let me know at what point I should stop pasting code, I totally appreciate it can eat resources, and I can upload it if needed, but here it is so far:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template</title>
<style type="text/css">
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
}
body {
	background-color: #0FF;
	text-align: center;
	min-width: 800px;
	max-width: 100%;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
}
h1 {
	font-size: 36px;
	color: #000;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-style: italic;
	font-weight: bolder;
	text-decoration: underline;
	letter-spacing: normal;
	text-align: center;
	word-spacing: normal;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#00FFFF" text="#000000">
<div><img src="Home Pic's/Banner.png" alt="Banner" width="412" height="62" align="absmiddle" /></div>
<p>&nbsp;</p>
<div class="MainContent" id="MainContent">
  <h1 align="center">Welcome To My Tutorials</h1>
  <p>&nbsp;</p>
</div>
<p><div style="width: 140px; auto; margin-right: auto; min-height:200px; height:auto height:500px;>
  <div align=; max-width: 25%;"center">
  <div align="center">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
        <ul>
          <li><a href="#" class="MenuBarItemSubmenu">Junk File Cleaners</a>
            <ul>
              <li><a href="#">ATF-Cleaner</a></li>
              <li><a href="#">CCleaner</a></li>
              <li><a href="#">Disk Cleaner</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Defragging</a>
            <ul>
              <li><a href="#">Auslogics</a></li>
              <li><a href="#">IObit SmartDefrag</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Updates</a>
            <ul>
              <li><a href="#">Secunia PSI</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Protection</a>
        <ul>
          <li><a href="#" class="MenuBarItemSubmenu">Anti-Virus</a>
            <ul>
              <li><a href="#">Avast!</a></li>
              <li><a href="#">Microsoft Security Essentials</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Anti-Spyware &amp; Anti-Malware</a>
            <ul>
              <li><a href="#">Emsisoft Anti-Malware</a></li>
              <li><a href="#">Malwarebytes Anti-Malware</a></li>
              <li><a href="#">SUPERAntiSpyware</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Hosts</a>
            <ul>
              <li><a href="#">Hosts File</a></li>
              <li><a href="#">SpywareBlaster</a></li>
              <li><a href="#">WinPatrol</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Safe Surfing</a>
        <ul>
          <li><a href="#">General Tips</a> </li>
          <li><a href="#">SiteAdvisor</a></li>
          <li><a href="#">WOT</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Extra Tools</a>
        <ul>
          <li><a href="#">Emsisoft Emergency Kit</a></li>
          <li><a href="#">Flash Disinfector</a></li>
          <li><a href="#">Iconix</a></li>
          <li><a href="#">Stinger</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

</p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

There isn’t enough CSS there to see how you are going. Could you post the contents of the css file?