WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: virgil on September 04, 2008, 10:48:21 AM

Title: css only drop down with show_menu2
Post by: virgil on September 04, 2008, 10:48:21 AM

hi everybody

i would like to create a template at my own with a drop down menu using JUST css, no javascript or IE behaviors, that works in IE, Firefox and Opera, uses just one menu and passes w3c validation without messing with the !doctype ...

basicly one like I have seen on http://www.cssplay.co.uk/menus/dd_valid.html


the thing is ...

the normal method of loading a file is used for the non-ie browser css,
and the IE only style sheet is loaded using the conditional comment.

link rel="stylesheet" media="all" type="text/css" href="css/dropdown.css" />

<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/dropdown_ie.css" />
<![endif]-->

... so far so good, until here I can follow ...


... BUT my problem starts HERE:


The xhtml code for the dropdown menu can be seen in text format at the same page
http://www.cssplay.co.uk/menus/dd_valid.html

you will see in teh source code that conditional comments have been used to hold the IE specific version of the menu which used nested tables. The other browsers will not see the tables and instead will use the normal unordered lists ... so you see things like:

<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

    <ul>
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>

    <!--[if lte IE 6]>
    <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
    <table><tr><td>
    <![endif]-->

... ... ... and so on ... ... ...


I want to realise this using show_menu2 with wb 2.6.x and wb 2.7 but do not really know how to configure the show_menu2 call and expcailly to to integrate all those:

<!--[if lte IE 6]>
<a href="bla bla bal">XYZ
<table><tr><td>
<![endif]-->

any suggestions?

tks
virgil