Author Topic: I need help with menus (Read 6031 times)

jesusto · « **on:** May 25, 2016, 02:27:14 »

Hello,

How can I fetch with css a menu item with child items? I want to show a character like ">" in all items with submenus.

How can I avoid tooltips for menu items? I think titles should be empty, they are a must in any other link but for menu items it is really disgusting.

Besides, for next versions I would like to be able to give a class to any item from admin panel and perhaps another one for the page where the item links.

Any help will be welcomed.

Thank you

jesusto · « **Reply #1 on:** May 25, 2016, 19:37:16 »

Hello again,

I have seen template Aurora has this feature.

Any clues, please?

Thank you

datahell · « **Reply #2 on:** May 26, 2016, 19:31:32 »

You can easily do it with CSS:
.elx_menu ul li a:before { content: "> "; }

jesusto · « **Reply #3 on:** May 26, 2016, 20:04:40 »

Thanks,

I had already tested something similar.

The results are not the expected ones.

I attach picture.

Regards

datahell · « **Reply #4 on:** May 26, 2016, 20:21:25 »

This is not what you want?

jesusto · « **Reply #5 on:** May 26, 2016, 20:34:41 »

No my friend.

What I want Is parent menu items to have > not child items.

Just like aurora template. I attach picture.

Thanks

datahell · « **Reply #6 on:** May 27, 2016, 22:28:13 »

This is tricky to do it with css only. You can read this if you like but it is advanced css.

I will write you here a much easier solution but requires a small change in menu module.
Open this file: modules/mod_menu/mod_menu.php
go to line 172:
echo $t2.'<li'.$liclass.'>'."\n";
Change it to this:
$xdata = '';
if (($level == 0) && (count($item->children) > 0)) { $xdata = ' data-subs="1"'; }
echo $t2.'<li'.$liclass.$xdata.'>'."\n";

Then in your template you can use add this to have the effect you want:
.elx_menu > li[data-subs="1"] > a:after { content: ' > '; }

jesusto · « **Reply #7 on:** May 27, 2016, 23:33:49 »

Hi,

It works like a charm.

I have created a new menu module for not being in trouble with updates but perhaps you can add this feature in new Elxis version, it can be interesting for other people.

Thanks a lot, really great support to the complete CMS!!

datahell · « **Reply #8 on:** May 28, 2016, 10:47:20 »

I added something better for Elxis 4.5, if you like you can change the code I wrote you before with the official code.

Undo the changes you did before and change this:
echo $t2.'<li'.$liclass.'>'."\n";
To this:
$subs = (count($item->children) > 0) ? 'subs' : 'nosubs';
echo $t2.'<li'.$liclass.' data-level'.$level.'="'.$subs.'">'."\n";

I also changed line 80 from this:
echo "\n".$t.'<ul'.$ulclass.'>'."\n";
To this:
echo "\n".$t.'<ul'.$ulclass.' data-level="'.$level.'">'."\n";

With this change for ALL menu list items you have the level information (root items has level 0, sub-items of root items have level 1, etc) and you also have the information if the menu item has sub-items (sub-menu) or not.

Examples
<li data-level0="nosubs">...</li> Root level (0) menu item without sub-menu
<li data-level0="subs">...</li> Root level (0) menu item with sub-menu
<li data-level1="nosubs">...</li> First sub level (1) menu item without sub-menu
<li data-level1="subs">...</li> First sub level (0) menu item with sub-menu
etc...

<ul class="elx_menu" data-level="0">
<li data-level0="nosubs"><a>ITEM</a></li>
<li data-level0="subs"><a>ITEM</a>
<ul data-level="1">
<li data-level1="nosubs"><a>ITEM</a></li>
<li data-level1="nosubs"><a>ITEM</a></li>
</ul>
</li>
</ul>

Now for your particular case to apply css on root elements that have sub menus use the [data-level0="subs"] selector:
.elx_menu li[data-level0="subs"] > a:after { content: ' > '; }
or you can apply a background image (arrow) to these elements:
.elx_menu li[data-level0="subs"] { padding-right:20px; background:url(right-arrow.png) 100% 0 no-repeat; }

jesusto · « **Reply #9 on:** May 28, 2016, 12:46:24 »

Just perfect,

I have made these changes in my custom menu till the release is here. Do you have in mind any date?

By the way, think about these other menu related improvements that other CMS has:

- No titles in links. I know they are very important for accessibility but they don´t look good there.
- Classes for every item. This way you can set a different icon for any menu item if you wish.
- Classes for the landing page a menu takes to. So the html body get something like <body class="whatever"... >

Anyway, thanks a lot for your great support!!

Author Topic: I need help with menus (Read 6031 times)

jesusto

I need help with menus

jesusto

Re: I need help with menus

datahell

Re: I need help with menus

jesusto

Re: I need help with menus

datahell

Re: I need help with menus

jesusto

Re: I need help with menus

datahell

Re: I need help with menus

jesusto

Re: I need help with menus

datahell

Re: I need help with menus

jesusto

Re: I need help with menus