I'm new to the whole Umbraco thing, so hopefully I've got the right forum for this one!
In the past I created horizontal tabbed navigation with sliding dropdowns using DevExpress components and binding to a hierarchical datasource.
With Umbraco, I get the impression everything is very lightweight (great) and there's obviously better ways of doing this. Basically I want to achieve :
1 - A tab menu which I can graphically style across the top of the site - where it responds to mouseovers with highlights etc. 2 - When a tab is hovered over, if that root page has sub pages, a menu slides down with the subpages. 3 - If the tab is the current page, the tab has a different color.
Sorry I know it's a list - I just need to know if there's anything already out there I can just 'slot' into Umbraco and if not, how difficult is the above to achieve and any pointers?
Hi Tony and welcome to the lovely world of Umbraco :-)
I don't think that there is something pluggable you can just download and install to get this kind of menu working.
But lately there have been more questions like this on how to create such a menu.
In short what you need to do is
1) Make an XSLT macro that fetches the nodes for your navigation. I suggest you have a look at the prewritten "navigation" XSLT, which is possible to select once you create an XSLT macro in Umbraco. Here you can specify how many levels the navigation must show. Set i to two.
2) Insert the macro into your master template - you should now see at raw unformatted HTML list of your navigation. It's ready to be styled! :)
3) Write the proper CSS styles and make the basics work by using display:none for level 2 nodes on default and show them using display:block on hover.
4) Add the effect you need using jQuery or your preffered JavaScript library.
Oops! Forgot to mention that you need to specify an id for the level 1 nodes, in order to be able to style them with different colors. This should be done in the XSLT macro.
If in doubt about how to do this don't hesitate to ask :)
Thanks very much Jan - much appreciated. I think I understand it abit better now - I guess the key is just remembering Umbraco uses XML for almost everything, so doing most things is just mastering the XSLT.
Might tap you on the help later though if I get stuck! ;)
The beauty of Umbraco is that there are more than one way you can do things. It's possible to create macroes based on ASP.NET user controls, python, razor and XSLT. You can also use linq to manipulate data. In v5 it seems like we will have even more options to choose between when we want to fetch our data.
So if you're a C# developer who does not like XSLT in any way you can use some of the other options to get your job done. And if you're a frontend guy who knows your way around markup languages then XSLT is the way to go.
So if you're skilled in C# you should try to have a look at the Umbraco API and play around with that. I'm not saying everything should then be built using user controls if one has the skills. It's about using the right tool for the right job. But if you're in a position where you don't have C# skills and don't have the ressources to hire one with those skills you can probably solve the task using XSLT as well.
Just some thoughts - I hope you like Umbraco and please do ask if you're stuck with something :-)
Tab menu with dropdowns
Hi everyone,
I'm new to the whole Umbraco thing, so hopefully I've got the right forum for this one!
In the past I created horizontal tabbed navigation with sliding dropdowns using DevExpress components and binding to a hierarchical datasource.
With Umbraco, I get the impression everything is very lightweight (great) and there's obviously better ways of doing this. Basically I want to achieve :
1 - A tab menu which I can graphically style across the top of the site - where it responds to mouseovers with highlights etc.
2 - When a tab is hovered over, if that root page has sub pages, a menu slides down with the subpages.
3 - If the tab is the current page, the tab has a different color.
Sorry I know it's a list - I just need to know if there's anything already out there I can just 'slot' into Umbraco and if not, how difficult is the above to achieve and any pointers?
To see what I mean I've got a test page set up here : http://tjbsoftware.eweb701.discountasp.net/Home
Warning though - it's vereeeeery slow so be patient (and it uses <gulp> Sitefinity, which I'm ditching) :)
Cheers!
Tony
Hi Tony and welcome to the lovely world of Umbraco :-)
I don't think that there is something pluggable you can just download and install to get this kind of menu working.
But lately there have been more questions like this on how to create such a menu.
In short what you need to do is
1) Make an XSLT macro that fetches the nodes for your navigation. I suggest you have a look at the prewritten "navigation" XSLT, which is possible to select once you create an XSLT macro in Umbraco. Here you can specify how many levels the navigation must show. Set i to two.
2) Insert the macro into your master template - you should now see at raw unformatted HTML list of your navigation. It's ready to be styled! :)
3) Write the proper CSS styles and make the basics work by using display:none for level 2 nodes on default and show them using display:block on hover.
4) Add the effect you need using jQuery or your preffered JavaScript library.
This should be the steps you need to go through.
Hope this helps.
/Jan
Oops! Forgot to mention that you need to specify an id for the level 1 nodes, in order to be able to style them with different colors. This should be done in the XSLT macro.
If in doubt about how to do this don't hesitate to ask :)
/Jna
Thanks very much Jan - much appreciated. I think I understand it abit better now - I guess the key is just remembering Umbraco uses XML for almost everything, so doing most things is just mastering the XSLT.
Might tap you on the help later though if I get stuck! ;)
Thanks again,
Tony
Hi Tony
I'm happy that I was able to help you out.
The beauty of Umbraco is that there are more than one way you can do things. It's possible to create macroes based on ASP.NET user controls, python, razor and XSLT. You can also use linq to manipulate data. In v5 it seems like we will have even more options to choose between when we want to fetch our data.
So if you're a C# developer who does not like XSLT in any way you can use some of the other options to get your job done. And if you're a frontend guy who knows your way around markup languages then XSLT is the way to go.
So if you're skilled in C# you should try to have a look at the Umbraco API and play around with that. I'm not saying everything should then be built using user controls if one has the skills. It's about using the right tool for the right job. But if you're in a position where you don't have C# skills and don't have the ressources to hire one with those skills you can probably solve the task using XSLT as well.
Just some thoughts - I hope you like Umbraco and please do ask if you're stuck with something :-)
/Jan
is working on a reply...