bulletmenu generates wrong html ?

[ploc]

Well, this is the first time I actually got around to looking at the problem.  I actually haven't touched nils73's code yet...

So, that leads me back to: Am I losing my mind? 

whishy, I don't think you're losing your mind. In fact, I think I've found an explanation...

In fact, I base the first post of this thread on the code generated by a demo version of cmsms (I can't remember if this is the demo cmsms website, or the one from opensourcecms.com) which is an old version of cmsms.

I think, the code had been corrected in en 0.9 or the 0.10 version...

Have you now found back your mind ?

Ploc

Edit : I've juste checked the demo version of cmsms website, the html code seems to be ok. I must have been smoke... (or the wrong html code came from opensourcecms.com...)

Anway, the last posts are still valid; but the firsts ones can be ignored I think...

[Ted]

Yes, yes I have.  Thank you. 

So, at some point we need to clean up the html for bulletmenu, but that's not a showstopper.  That's good.

[iNSiPiD]

Now I think I've lost my mind. :& :% :@ :* :~) [So how do you write a crazy faced smiley anyway??]

[nils73]

If you need any assistance from my side, let me know ...

[Greg]

I recently purchased the book Stylin' with CSS by Charles Wyke-Smith to get a better understanding of CSS based menus.
There are many CSS based menu examples with with dropdown menus. Bulletmenu creates code that is close to what is needed but ....

If Bulletmenu could be changed to produce the code as per the book phplayers could be replaced.

The HTML code that needs to be created to use CSS dropdowns needs the following structure:

Code: Select all

<div id="listmenu">
 <ul>
  <li><a href="#">Customers</a>
     <ul><!-- drop down menu items -->
        <li><a href="#">Our Services</a></li>
        <li><a href="#">FAQs</a>
		  <ul><!-- pop-out menu items -->
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
			<li><a href="#">Store</a></li>
            <li><a href="#">Company</a></li>
            <li><a href="#">Careers</a></li>
          </ul>
		 </li>
        <li><a href="#">Sign Up</a></li>
        <li><a href="#">Support</a>
		  <ul> <!-- pop-out menu items -->
            <li><a href="#">Gold program</a></li>
            <li><a href="#">Silver program</a></li>
            <li><a href="#">Bronze program</a></li>
            <li><a href="#">Contact Us</a>
			  <ul> <!-- second level pop-out menu items -->
				<li><a href="#">West Coast</a></li>
				<li><a href="#">Mountain Region</a></li>
				<li><a href="#">Central Region</a></li>
				<li><a href="#">East Coast</a></li>
			  </ul>
			</li>
          </ul>
		</li>
		<li><a href="#">What's New</a></li>
      </ul>
  </li>
  <li><a href="#">Members</a>
  <ul>
        <!-- second level pop-out menu items-->
         <li><a href="#">Join</a></li>
         <li><a href="#">Log in</a></li>
         <li><a href="#">Meet others</a></li>
         <li><a href="#">Special Offers</a></li>
   	  </ul>
  </li>
  <li><a href="#">Dealers</a>
  <ul>
        <!-- second level pop-out menu items-->
         <li><a href="#">Special Pricing</a></li>
		 <li><a href="#">Orders</a></li>
         <li><a href="#">Update Listing</a></li>
         <li><a href="#">Events</a></li>
   	  </ul>
  </li>
  <li><a href="#">Distributors</a>
      <ul>
        <!-- drop down menu items-->
        <li><a href="#">Products</a></li>
        <li><a href="#">Dealer Finder</a>
		<ul>
        <!-- pop-out menu items-->
         <li><a href="#">West Coast</a></li>
         <li><a href="#">Mountain Region</a>
		 <ul>
        <!-- second level pop-out menu items-->
         <li><a href="#">North</a></li>
         <li><a href="#">South</a></li>
         <li><a href="#">East</a></li>
         <li><a href="#">West</a></li>
      	</ul>
		</li>
         <li><a href="#">Central Region</a></li>
         <li><a href="#">East Coast</a></li>
      	</ul>
	  </li>
        <li><a href="#">Commissions</a></li>
        <li><a href="#">Customers</a></li>
      </ul></li>
  </ul>
</div>

[Greg]

The above template actually creates 4 levels and to add another level is not difficult.

The HTML and CSS code etc. that goes with the book is here

The code I quoted with the css is in chapter 7  (listing fig7.28.htm)... take a look Patricia.

[Ted]

Well, I started a CSSMenu module this afternoon.  Sort of a weird conincidence that you posted this around the same time.

Anyway, my first point of business was taking the bulletmenu code and making it more sane.  This is done, and it's suprirsingly similar to your code above.  So...  I guess the next step would be to use the css in that link.  Better check licenses first...

[Ted]

Ok, I'm gonna need some help.  If anyone wants to hand feed me some CSS for a vertical and horizontal menu that flies out it's children, I would be most appreciative.

This is the kind of stuff that's too frustrating me for me.

Here is the output of the module so far...

Code: Select all

<div id="menu">

<ul>
<li><a href="http://localhost/cms/index.php?page=cms-install-successful-" class="currentpage">Home Page</a>
<ul>
<li class="sectionheader"><h2>FAQ</h2>
<ul>
<li><a href="http://localhost/cms/index.php?page=contact-us">Contact Us</a>
</li>
</ul>
</li>
<li class="separator"><a href="#"></a></li>
<li><a href="http://localhost/cms/index.php?page=svn-cvs-">SVN (cvs)</a>

</li>
</ul>
</li>
<li><a href="http://localhost/cms/index.php?page=Uploads">Uploads</a></li>
<li><a href="http://localhost/cms/index.php?page=Test">Test</a></li></ul></div>

</div>

Thanks!

[Greg]

Looks like you are on the right track wishy. I used the css from the above chapter 7  (listing fig7.28.htm) and it produces a 3 item menu on the top bar a dropdown with two subitems uder the home page menu and a pop-out from the FAQ subitem.

[Ted]

Is there anything in that book for a vertical version?

[Greg]

Nothing in the book, but if you remove the first float:left statement in the div#listmenu CSS you get a vertical menu.
I have it running with a vertical menu on my local set-up.  The CSS actually works with Bulletmenu as it was with IE but Firefox insists on the above code.
(So late in replying because my 19" acer monitor died !)

[Ted]

Hmm.  I'll have to see your example.  It looks like a jumbled mess to me...  Maybe I'm missing something, but the flyouts are going down instead of over to the right.  Probably just me being lazy.

[Greg]

Another method that has a wee tiny bit of javascript for IE is Here
wishy I sent you a pm with more info on the above CSSMenu.

[iNSiPiD]

I've just discovered that the number_of_levels parameter treats 0 as no menu display.

So 4 will show 3 levels deep.

NOt really a big, just something I noticed.

NB: For anyone who'd like to see what bulletmenu and cross-broswer CSS can do to 3 levels, please visit my new almost-launched oranisation's website here:

http://d81314.i50.quadrahosting.com.au/ ... blications

Comments welcome.

Please note that NO client-side scripting or tricks have been used.

Unfortunately I can't see a way to get flyouts to work without JS.