Clean theme - dropdown menu for subpages

Post Reply
grimblefritz
Posts: 16
Joined: Tue Apr 25, 2023 1:21 pm

Clean theme - dropdown menu for subpages

Post 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?
User avatar
mjxl
Posts: 44
Joined: Thu Jan 30, 2020 4:57 am

Re: Clean theme - dropdown menu for subpages

Post 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 !
grimblefritz
Posts: 16
Joined: Tue Apr 25, 2023 1:21 pm

[SOLVED] Clean theme - dropdown menu for subpages

Post 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.
NorfolkGreg
Posts: 87
Joined: Wed Sep 01, 2021 7:50 am

Re: Clean theme - dropdown menu for subpages

Post 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?
NorfolkGreg
Posts: 87
Joined: Wed Sep 01, 2021 7:50 am

Re: Clean theme - dropdown menu for subpages

Post 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.
User avatar
turboblack
Posts: 198
Joined: Fri Sep 19, 2014 1:53 pm

Re: Clean theme - dropdown menu for subpages

Post 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)
http://old.net.eu.org/ Get ready to hamsterization! 8-) code takes less than a kilobyte! shock!
https://github.com/turboblack/HamsterCMS new version for PHP 8 with new templates
Post Reply