Hello hello forum!
I have trouble styling the menu, it is just not working, and I would appreciate a lot some help and explanation...
My menu code has just one id for a main UL and a class name for the child UL (drop down), it goes like this:

Code: Select all

<ul id="mainnav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Über uns</a></li>
      <li><a href="#">Angebot</a>
        <ul class="children">
          <li><a href="#">Kurse</a></li>
          <li><a href="#">Workshops</a></li>
          <li><a href="#">Intensivcoaching</a></li>
          <li><a href="#">Mentoring</a></li>
          </ul>
        </li>
            <li><a href="#">Anmeldung</a></li>
      <li><a href="#">Kooperationen</a></li>
      </ul>

and there is a bit of java script, adressing that ul id and class

Code: Select all

<script>
$(document).ready(function(){
 
    $('ul#mainnav li').hover( function(){
        $(this).addClass('hover');
        $( 'ul.children', this ).css('visibility', 'visible');
        
    }, function(){
        $(this).removeClass('hover');
        $( 'ul.children', this ).css('visibility', 'hidden');
    });
});
</script>

I tried this with menu tag:

Code: Select all

<cms:menu masterpage='menu/robertaMENU.php' menu_id='mainnav' menu_class='children'/> 

but I no styles show up...

Then I tried with nested_menu:

Code: Select all

<cms:nested_pages masterpage=masterpage='menu/robertaMENU.php' extended_info='1' >
   <cms:if k_level_start >
      <cms:if k_level='0'>
          <ul  id="mainnav">
      <cms:else />
          <ul class="children">
      </cms:if>
   </cms:if>
   
   <cms:if k_element_start >
      <li id="item-<cms:show k_nestedpage_name />" class="level-<cms:show k_level/><cms:if k_total_children> has-submenu</cms:if><cms:if k_first_child> first</cms:if><cms:if k_last_child> last</cms:if><cms:if k_is_active> active</cms:if><cms:if k_is_current> current</cms:if>">
      <a href="<cms:show k_menu_link />"><cms:show k_menu_title /></a>
   </cms:if>
   
   <cms:if k_element_end ></li></cms:if>
   <cms:if k_level_end ></ul></cms:if>
</cms:nested_pages>

But again no style shows up...

Thanks in advance, any help is appreciated


Tanja

Hi Tanja,

Might I suggest an entirely CSS solution for your dropdown menu?

I have several working examples that work with couches <cms:menu> tag, a working example can be seen over at http://www.styleinteriordesigns.co.uk

You don't NEED to use javascript to achieve this, although I can see what you are trying to do - my suggestion would be to use CSS to target the UL outputted by the menu. The <cms:menu /> tag will output each <ul> and <li> with a pre-defined class, so your best option is to add a <div> around the menu with a class which you can then use to target the entire menu via css.

A sample would be this

Code: Select all

<div class="nav">
<cms:menu masterpage='menu/robertaMENU.php' /> 
</div>

which should output something similar to your original code (with some couch-added classes onto the <ul> and <li> elements. So your code would be (without the classes):

Code: Select all

<div class="nav">
<ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Über uns</a></li>
      <li><a href="#">Angebot</a>
        <ul>
          <li><a href="#">Kurse</a></li>
          <li><a href="#">Workshops</a></li>
          <li><a href="#">Intensivcoaching</a></li>
          <li><a href="#">Mentoring</a></li>
          </ul>
        </li>
            <li><a href="#">Anmeldung</a></li>
      <li><a href="#">Kooperationen</a></li>
      </ul>
</div>

Then, your css could be:

Code: Select all

.nav{
position/style for the nav itself
}
.nav ul{
list-style-type:none;
font-size:0;
}
.nav ul li{
font-size:14px;
display:inline-block;
}
.nav ul li ul{
display: none;
opacity: 0;
visibility:hidden;
}
.nav ul li:hover ul{ 
display: block;
opacity: 1;
visibility: visible;
}

You would then style your <li><a></a></li> tags normally to style the menu.
I hope this helps - You can find a working example here http://cssdeck.com/labs/another-simple- ... pdown-menu
Ignore the transitions and it's just another CSS menu.

The menu_class and menu_id parameters of the <cms:menu /> tag do work well and in some cases can be used to achieve things that we couldn't with the above method, however this menu is rather simple and doesn't require any complicated methods, just some html/CSS should be enough with the basic menu tag to output the menu.

Also, your <cms:nested_pages /> tag has a double masterpage param (masterpage=masterpage=)

Thanks, Dave

hi Dave, thanks for the code!

the reason I chose this menu is, that it is a cross browser safe, up to IE 7...

therefore also java script...here is where I got it
http://jasonskinner.me/2013/04/create-a-minimal-cross-browser-dropdown-menu/

Is the menu you suggested safe for older browsers?

Tanja

hi Dave, thanks for the code!

the reason I chose this menu because it is a cross browser safe, up to IE 7...

therefore also java script...here is where I got it
http://jasonskinner.me/2013/04/create-a-minimal-cross-browser-dropdown-menu/

Is the menu you suggested safe for older browsers?

Tanja

As far as I'm aware it works on ie7 and above (I cannot vouch for IE6) You may need to play around with the position of the dropdown UL but it should work as intended, there aren't any CSS3 methods used here and since it's purely HTML/CSS it should work perfectly well on all browsers with slight twinking. The http://www.styleinteriordesigns.co.uk/ website menu works on IE7 although there is a slight positioning error as we did not focus on older browsers, but I could probably fix it with some small edits to the CSS.

So, yes I believe this will work on IE7 and above as long as you style it correctly

Edit: I've just fixed the menu in IE7 on www.styleinteriordesigns.co.uk to make the second UL position in the correct place I just added *position:relative; to the hovered ul class, so:

Code: Select all

 .menu>ul>li:hover ul{display:block !important;*position:relative;}

and the menu displays exactly the same in ie7 and above now, as well as all other modern browsers.

Thanks, Dave

Thanks Dave! I will look at that menu!

Although I still hope to get explained what I am doing wrong with "my" menu , as that is not up to Couch but up to me...
Couch is "agnostic" itself, as Kamran somewhere said , and works with any language in any combination actually)...


Tanja

[KK]

@tanja,

I think @dave's solution merits your attention as it does not rely on JS.

That said, since you have posted a specific question on the forum it is imperative for me to provide a solution to the problem mentioned.

Coming to which -
The cms:nested_pages tag can be used to output absolutely any kind of menu.

The following should produce the *exact* menu markup that you posted -

Code: Select all

<cms:nested_pages masterpage='menu/robertaMENU.php' extended_info='1' >
    <cms:if k_level_start >
        <cms:if k_level='0'>
            <ul  id="mainnav">
        <cms:else />
            <ul class="children">
        </cms:if>
    </cms:if>

    <cms:if k_element_start >
        <li><a href="#"><cms:show k_menu_title /></a>
    </cms:if>

    <cms:if k_element_end ></li></cms:if>
    <cms:if k_level_end ></ul></cms:if>
</cms:nested_pages>

This is very close to what you used so I am surprised why your code did not work as expected (it has a typo - you have used 'masterpage' twice).

Hope this helps.

Thanks Kamran!
And I am sorry for "false alarm" , I was convinced that I do not understand something there...
But when you said my code is actually ok, I started to look for the reason elsewhere....
Problem was that I forgot to put absolute link with Couch code, the k_site_link, and because I have Pretty URL's activated, neither styles nor scripts were loading...
I guess I was working too long with the computer and my brain switched off a bit...
Thanks again for answering my post ...

Tanja

[KK]

That's perfectly alright, Tanja
I am glad the problem is resolved.