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?
Clean theme - dropdown menu for subpages
-
- Posts: 16
- Joined: Tue Apr 25, 2023 1:21 pm
Re: Clean theme - dropdown menu for subpages
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:
So our dropdown "content" would be the selector "nav-item".
As for the container, we have this code:
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 !
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>
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 -->
If that is not correct, we could use the ul. (ul.nav or ul.navbar-nav)
Hope this helps !
-
- Posts: 16
- Joined: Tue Apr 25, 2023 1:21 pm
[SOLVED] Clean theme - dropdown menu for subpages
I have worked out a pretty good dropdown menu system. If there weren't mobile devices, it would have been easy ![Smile :)](./images/smilies/icon_e_smile.gif)
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.
![Smile :)](./images/smilies/icon_e_smile.gif)
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.
-
- Posts: 90
- Joined: Wed Sep 01, 2021 7:50 am
Re: Clean theme - dropdown menu for subpages
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?
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?
-
- Posts: 90
- Joined: Wed Sep 01, 2021 7:50 am
Re: Clean theme - dropdown menu for subpages
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.
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.
- turboblack
- Posts: 201
- Joined: Fri Sep 19, 2014 1:53 pm
Re: Clean theme - dropdown menu for subpages
finally someone has implemented a desktop site without bootstrap, great respect! minimalistic, neat, beautiful. super!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.
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!
code takes less than a kilobyte! shock!
https://github.com/turboblack/HamsterCMS new version for PHP 8 with new templates
![Cool 8-)](./images/smilies/icon_cool.gif)
https://github.com/turboblack/HamsterCMS new version for PHP 8 with new templates