Page 1 of 1

Clean theme - dropdown menu for subpages

Posted: Tue Apr 25, 2023 1:37 pm
by grimblefritz
I'm not much good with CSS and JS stuff. I usually recognize with a thing is possible. I just don't know how to go about doing it.

Has anyone implemented, or can someone help me how to implement, dropdown menus for subpages in the Clean theme?

Re: Clean theme - dropdown menu for subpages

Posted: Tue May 02, 2023 6:22 pm
by mjxl
I used W3 schools for getting into some HTML/CSS.
Here's a page for dropdown stuff: https://www.w3schools.com/css/css_dropdowns.asp

Our navigation items look like this:

Code: Select all

<li class="nav-item active">
  <a class="nav-link" href="...">Home</a>
</li>
So our dropdown "content" would be the selector "nav-item".
As for the container, we have this code:

Code: Select all

<div class="collapse navbar-collapse" id="navMobile">
  <ul class="nav navbar-nav">
    <?= $Wcms->menu() ?>
  </ul>
</div><!--/.nav-collapse -->
So then the selector the items originate from, can be either the div (.collapse/.navbar-collapse/#navMobile)

If that is not correct, we could use the ul. (ul.nav or ul.navbar-nav)

Hope this helps !

[SOLVED] Clean theme - dropdown menu for subpages

Posted: Tue May 16, 2023 10:03 pm
by grimblefritz
I have worked out a pretty good dropdown menu system. If there weren't mobile devices, it would have been easy :)

I will post a link to a site that's using it, just as soon as I get permission from them. If they nix using their site, I'll make a demo site.

Re: Clean theme - dropdown menu for subpages

Posted: Thu Feb 08, 2024 12:07 am
by NorfolkGreg
I desperately need to see that demo site as I don't understand how your code snippet helps.

I want to produce a menu system similar to that at:
https://www.w3schools.com/howto/howto_j ... opdown.asp
The wide screen part with its hover dropdown option works acceptably. However, on a touchscreen the narrow screen version is unusable as hovers simply don't work.

So I turned to:
https://www.w3schools.com/howto/howto_j ... idenav.asp
to implement a clickable dropdown option but their method requires that there is a non-link tag, on which to hang the necessary CSS code, before the nested <ul></ul> dropdown structure.

Is there a way to make the <?= $Wcms->menu() ?> function produce a non-link tag where a sub-page is to be generated?

Do I need to request a new feature so when adding an item on the Menu page of the Admin Modal, there is a choice on when generating a Sub-page, so that either a page and link are created at the upper level (as happens at the moment) or merely only a menu option is generated without an accompanying page and a <button>, <p> or other non-<a> tag is generated to go above the <ul>dropdown</ul> structure. when calling the <?= $Wcms->menu() ?> function?

Re: Clean theme - dropdown menu for subpages

Posted: Thu Feb 08, 2024 11:36 am
by NorfolkGreg
I should explain, I am converting a small hand coded site of mine to use the WonderCMS platform with a theme to match the original site. The original is at:
https://gregchapman.uk and Wcms version is at https://gregchapman.me.uk/wondercms/home

Wcms currently has no capacity to match the menu icons (I'm not too worried about that, but would be nice to have) and apart from not being able to find a way of being able to implement a click, rather than hover, dropdown menu system, I'm reasonable happy with the way it's turning out.

Give me a few days to get the theme on GitHub ready for general release and I'll invite the community to play with it and report bugs and suggestions for improvement.

Re: Clean theme - dropdown menu for subpages

Posted: Fri Feb 09, 2024 10:33 am
by turboblack
NorfolkGreg wrote: Thu Feb 08, 2024 11:36 am I should explain, I am converting a small hand coded site of mine to use the WonderCMS platform with a theme to match the original site. The original is at:
https://gregchapman.uk and Wcms version is at https://gregchapman.me.uk/wondercms/home

Wcms currently has no capacity to match the menu icons (I'm not too worried about that, but would be nice to have) and apart from not being able to find a way of being able to implement a click, rather than hover, dropdown menu system, I'm reasonable happy with the way it's turning out.

Give me a few days to get the theme on GitHub ready for general release and I'll invite the community to play with it and report bugs and suggestions for improvement.
finally someone has implemented a desktop site without bootstrap, great respect! minimalistic, neat, beautiful. super!

Bloated code on websites pisses me off.
that's why I abandoned frameworks (almost, except for the editor)