Some questions about a Neos Navigation with "hover" drop down for sub pages if page has sub page

Hello,

i am new to this forum, my name is Sascha i live in Germany, and i like to create my Website with Neos, even if it’s not that easy for a beginner in my opinion.

i do work with Neos for a while now, and even if i have a knowledge issue on my side currently, i tried to create my own page by reading the documentation and look at the Neos demo package and so far it did look good.

But there is still one thing that i just can’t get solved, and i did not find a (for me as beginner) understandable solution. I want to create a Website, with a “hover” based Drop down navigation like the Navigation on this screenshot:

The basic styling is already done, and i have the “main” navigation items created by Neos. but i can’t get the Drop down to work.

My menu is based on the article: Adjusting Neos Output Menu Rendering and the DemoPackage of neos. As i was building the menu, i had an menu that did look exactly like the Neos Demo package menu, if you did go to a page with sub pages, then a new “div” did appear where the sub pages where listed. So i thought i may just need to edit the css styling but this didn’t worked as expected.

So my question is can someone point me in the right direction, on howto exactly i can create an navigation with a hover drop down where the “hover drop down” only does appear if the “page” does have “sub pages”?

The other question i think about at the moment is, would it be possible, to create “if conditions” to get a navigation with hover drop down and different “drop down” styles based on template set for the page where the sub pages are created?

Sorry for my bad English, i hope someone is still able to understand what i tried to explain/ask.

regards

Sascha “Ryuujin”

I also studied Typo3 Neos, but it is true that it is not easy to implement … if you want to make a site without complicating your work, try Divi with the plugin Divi builder. you can quickly get what you want to do with your menu. http://www.elegantthemes.com/demo/?theme=Divi
Regards
jean-claude

Hello,

thank you for you response, well i have a theme already with the CSS styling for the drop down as you can see in the screen shot i posted above (it’s from the template i use) it’s based on bootstrap and so far it’s fine.

I just want to create my website with the template in neos (the main page template is done), as i am already work on it a while, and only because of it’s not that easy, i am not fine with it to giveup.

Currently only the “navigation with a hover drop down” drives me crazy maybe later on something other, but for now i just work on the navigation to get it to work.

At the moment i am not sure if i can’t get it to work because of i miss something in my “typoscript2” for the menu, or if i just do the “templating” of the menu wrong. The “language menu” i use does work just fine with a hover dropdown.

on this Screenshot you can see the Neos Site i created currently: https://enraged.eu/_Resources/Persistent/3b54d4f7994dd8d6b68b7543d9fa2bc830592a67/neostemplate.png

the Blue Line is my language menu "the right side is currently “still hardcoded in the template” i am note sure if i can setup there a content collection with text (would this be possible?)
The “div” under the Blue line is my main Navigation, and so far it does look like on the template, the only thing is i can’t get my drop down to work and i am not sure on how to “tell” the navigation, to have a specific “dropdown” styling for the menu “li” if the page has subpages.

Regards

Sascha

In the bootstrap demo, the page template calls TypoScriptObjects which render the menu items.

You can use conditions there to give your DIV a custom class and then use CSS to display:hide the DIV if it has no subitems.

The TypoScriptObjects of the bootstrap demo are located here:
/Packages/Sites/TYPO3.NeosDemoTypo3Org/Resources/Private/Templates/TypoScriptObjects

Hello,

thank you for your response, i will check that and see if i can get it to work i think i found the issue why my hover does not react. so i hope someone can tell me how to set an class=“myclass” in the link that neos does create with this line:

	<neos:link.node node="{item.node}">{item.label}</neos:link.node>

as i would need to have set there class=“dropdown-toggle” so that my hover set to this class can react.

Regards

Sascha

Hello Ryuujin

here is the link to a site that I started with TYPO3 Neos …
you can see the horizontal menu with the submenu that appears when the mouse is over …

Is this type of menu you want to realize ? …
if … yes, I can help you with my files.

http://aniweb.fr/

best regards
jean-claude

Hello jean_claude,

thank you for your offer yes like your menu, only with more subpages in the submenu. While i was searching for a solution, i did found a website, where the creator posted it’s code to github, i think i will take a look at this to get an inspiration on how setup the menu as this website does have an drop down like i want to create.

Page that uses a Navigation like i want to create

Git of this package

Regards

Sascha

Hello,

well i did take a look at the package now, and i finally did see what i missed in his package, Daniel Lienert did set up viewhelpers and some if conditions to get the menu with the dropdown to run.

In Case he does hit and read this thread @ Daniel Lienert Thank you for your Package on Github, i think finally i will be able to build my navigation (now i just need to find the time for that :smile:) .

and many Thanks to the other guys who responded to me and did give me some input so i was able to learn a bit more about neos and how to create stuff with it (i think i still will have a long road till i understand it) but i like neos and so i will continue to investigate / use and learn about it.

Regards

Sascha