DHTML menu hide H3

General questions about CMSimple
bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

DHTML menu hide H3

Post by bastingse » Fri Aug 15, 2014 11:19 am

I'm using the DHTML menu (dhtml.navi + menu.js) very often but now i develop a website where i want to hide the H3 menulevel in the submenu. Is that possible?

I want this because i have many H3 pages. I can hide them per page but then , when i visit a H3 page it does not show proper in the 'locator'.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: DHTML menu hide H3

Post by cmb » Fri Aug 15, 2014 2:37 pm

bastingse wrote:I'm using the DHTML menu (dhtml.navi + menu.js) very often but now i develop a website where i want to hide the H3 menulevel in the submenu. Is that possible?
I'm pretty sure that it is possible, but most likely it's not worth the hassle to modify dhtml.navi and menu.js. Actually, I can't see any reason to offer a pure JavaScript drop-down menu nowadays. For usability reasons you will have to add a "normal" menu anyway, and you can even have a drop-down menu that works on all relevant browsers instead.

Therefor you can use xtoc28 or maybe AdvancedToc. Styling such a menu is not as simple as by setting the configuration options in menu.js, but it isn't too hard (and much more flexible). I'll try to write a tutorial within the next days. And of course there are lots of templates out there which have a horizontal drop-down menu; see, for instance, http://cmsimpleforum.com/viewtopic.php?f=8&t=7967.
Christoph M. Becker – Plugins for CMSimple_XH

bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: DHTML menu hide H3

Post by bastingse » Fri Aug 15, 2014 6:20 pm

A tutorial would be very helpful cause right now i have no idea how to implement xtoc28 or advancedtoc.
Wonder if it is possible in one of those menus to hide a H3 level??

Emile

designfjord
Posts: 68
Joined: Fri Apr 16, 2010 4:19 pm
Location: Germany/Franconia

Re: DHTML menu hide H3

Post by designfjord » Fri Aug 15, 2014 7:11 pm

do it with your CSS.
Just set the visibility of the class associated with the H3-menuitem to hidden maybe like

Code: Select all

h3
{
visibility:hidden;
 }
leberecht.net | keep it simple, or fail

svasti
Posts: 1651
Joined: Wed Dec 17, 2008 5:08 pm

Re: DHTML menu hide H3

Post by svasti » Fri Aug 15, 2014 7:20 pm

I have made all kinds of drop down menus by now without the use of xtoc28 or AdvancedToc.
These additions simply make life difficult and bloat the code.
xtoc28 was for CMSImple 2.8, :lol:
Unfortunately in our standard download there are still 2 templates that use xtoc. Not really up to date.
cmb wrote:I'll try to write a tutorial within the next days.
I made a series of variations of the mini1 templates with (1) horizontal drop-down menu, (2) centered drop-down menu and (3) vertical fold-out menu, just to show how it is done (without xtoc or whatever). One could make a tutorial with that. However a tutorial in our docuwiki seems to me a bit dry... I'd rather have a tutorial where there is an explanation and the working example right next to it. I just tried, it can be done in CMSimple_XH.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: DHTML menu hide H3

Post by cmb » Fri Aug 15, 2014 7:32 pm

svasti wrote:I have made all kinds of drop down menus by now without the use of xtoc28 or AdvancedToc.
How did you manage that the current page is marked up as <a>? Basically, that is what xtoc28 is doing. The <a> is not necessary on somewhat contemporary desktop browsers, but most likely it is necessary for mobile browsers to map the :hover to touch events (see http://cmsimpleforum.com/viewtopic.php?f=5&t=7716).
svasti wrote:I made a series of variations of the mini1 templates with (1) horizontal drop-down menu, (2) centered drop-down menu and (3) vertical fold-out menu, just to show how it is done (without xtoc or whatever). One could make a tutorial with that. However a tutorial in our docuwiki seems to me a bit dry... I'd rather have a tutorial where there is an explanation and the working example right next to it. I just tried, it can be done in CMSimple_XH.
I would be glad if you could put together a tutorial of it (just a few notes regarding the important differences to "classic" menus might suffice). I don't mind, where it is set up--putting a link in the Wiki would be fine.

PS:
designford wrote:do it with your CSS.
Just set the visibility of the class associated with the H3-menuitem to hidden maybe like
Usually that's fine, but if the browser doesn't understand CSS, or the user disables CSS or has a user stylesheet which overrides the rule, the menu items will be visible.

I prefer to think of a website being HTML, with CSS and JS bringing optional enhancements. :)
Christoph M. Becker – Plugins for CMSimple_XH

svasti
Posts: 1651
Joined: Wed Dec 17, 2008 5:08 pm

Re: DHTML menu hide H3

Post by svasti » Fri Aug 15, 2014 8:06 pm

cmb wrote:How did you manage that the current page is marked up as <a>
No need to mark it as <a>, because you are on the page and don't neet a link to it. With the absense of <a> you can give the menu entry for the current page a different styling, so that the visitor knows where he is.
cmb wrote:but most likely it is necessary for mobile browsers to map the :hover to touch events
This I haven't tested for want of a smartphone.
Just tested my dropdown menu on IE6, doesn't work :(

If you have a smartphone please check cmsimple-xh.org (vertical fold out menu without toc28) and the demo where there are 2 horizontal drop down menus without toc 28 (mini2 and fluidwhite).

We could have the tutorial on cmsimple-xh.org and we could do it together ...

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: DHTML menu hide H3

Post by cmb » Fri Aug 15, 2014 8:59 pm

svasti wrote:If you have a smartphone please check cmsimple-xh.org (vertical fold out menu without toc28) and the demo where there are 2 horizontal drop down menus without toc 28 (mini2 and fluidwhite).
I do not have a smartphone, but an Android tablet with the Dolphin browser. The drop-down/fly-out menus work fine[1] there even without an <a>; however, the "Plugins" menu works fine there, too, but apparently not on all other mobile devices/browsers.
svasti wrote:Just tested my dropdown menu on IE6, doesn't work ;)
That's because old IEs (and maybe other old browsers) recognize the :hover pseudo-element only for <a> elements; see http://www.quirksmode.org/css/selectors/#t41 (which is generally highly recommendable). I assume that was the reason for xtoc being developed--in a time were IE6 was quite common, you had to either style a:hover or use some additional JavaScript such as Suckerfish. And now that IE 6 is mostly gone, we have mobile browsers and maybe other touch devices, which seem to require a:hover.
svasti wrote:We could have the tutorial on cmsimple-xh.org and we could do it together ...
Doing the tutorial together is a good idea--I'm not sure about having it on cmsimple-xh.org directly; maybe a separate installation is more appropriate. <dreaming>We may be able to set up an interactive tutorial, and even a menu builder.</dreaming> Well, let's concentrate on reality: we might start with a simple intro on how to do a "classic" (non drop-down/fly-out) menu, with some variations.

[1] "Fine" is exaggerated. If I tap too quick the linked page is requested; if I tap too long I'm asked whether I want to open the link in a new tab or with another program.
Christoph M. Becker – Plugins for CMSimple_XH

svasti
Posts: 1651
Joined: Wed Dec 17, 2008 5:08 pm

Re: DHTML menu hide H3

Post by svasti » Sat Aug 16, 2014 2:39 pm

In order to do something I now simply wrote a tutorial on my own server, as I didn't know where else to put it:

Horizontal drop down menu

The needs an XH-page, however Tinymce will distroy it, but with CKeditor it works.
The text uses a lot of function calls and inserts css into the body, which is not allowed it seems, but which works.

Anyhow it is interesting to do a tutorial, because you have to think about what is really essential. And thus the css for the drop down menu became really small.

bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: DHTML menu hide H3

Post by bastingse » Sat Aug 16, 2014 3:16 pm

Whow.. well done !!!!
Very well written !

But how to hide H3 pages from the menu??
For example: http://www.thejohnhiattarchives.com/2014/ and browse to "Tour > 90's"

I got this css:

Code: Select all

.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.menu ul.menulevel1 li {
    float:left;
    margin-right: 1em;
    position:relative;
    white-space: nowrap;
}
.menu ul li a:hover {
    color:blue;
}
.menu ul ul {
    visibility: hidden;
    position: absolute;
    width:150px;
    background:white;
    z-index:1;
}
.menu li:hover > ul {
    visibility: visible;
}
.menu ul ul li{
    width:150px;
    white-space: normal;
}
.menu ul ul ul {
	visibility: hidden;
    left:150px;
    top:0;
}
And i have this in my template:

Code: Select all

class="menu"><?php echo li($hc,1);?>

Post Reply