Elxis CMS Forum
Support => General => Topic started by: 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
-
Hello again,
I have seen template Aurora has this feature.
Any clues, please?
Thank you
-
You can easily do it with CSS:
.elx_menu ul li a:before { content: "> "; }
-
Thanks,
I had already tested something similar.
The results are not the expected ones.
I attach picture.
Regards
-
This is not what you want?
-
No my friend.
What I want Is parent menu items to have > not child items.
Just like aurora template. I attach picture.
Thanks
-
This is tricky to do it with css only. You can read this (https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/) 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: ' > '; }
-
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!!
-
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; }
-
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!!