I’m new to umbraco and am looking for some guidance. Here’s
the situation:
I would like to create a mega dropdown menu system for my
site. This would be a true mega dropdown ala http://www.useit.com/alertbox/mega-dropdown-menus.html,
not a dropdown with multiple child flyouts. I have the code to make everything
work on the client side. I’m just trying to figure out the best way to store
the data in umbraco and create a ui for managing the menu. I understand that by
going this route, the menu will not auto update. Editors will indeed be responsible
for managing the links within the menu. I have already built a “menu manager”
tool in my own bespoke CMS that has this functionality, but I would like to
understand the best way to do this in umbraco.
Here is the data structure that I currently use:
menuId – int, primekey
linkText – text, the text for the top level link
linkUrl – text, the url for the top level link
linkTarget – text, optional
sort – int dropdownContent - text dropdownWidth – int, optional dropdownX – int, optional
Hopefully it’s pretty self-explanatory. Each record consists
of a top level link and its child content. The child content is stored in “dropdownContent”.
The properties “dropdownWidth” and dropdownX are optional fields that provide
extra control for a dropdown that is wider than the default, or needs to be
positioned to somewhere other than the bottom left of the parent link.
I could add a table to the db and create my own ui to manage
this, but I would rather keep it all in the the umbraco ui. Would a reasonable approach
be to create a custom document type to store this information and treat the
menu items as a distinct type of content? What is the best way to hand
something like this?
To create this menu you will of course need to define some document types that should make up your site.
On that document type I would create these tabs "Content" and "Navigation". You create document types in the "Settings" section of Umbraco.
On the "Content" tab I would at least create a property for the content of the page, with an alias of "bodyText". (This has nothing to do with the navigation, just the page content).
I would create it like this
Name: Content Alias: bodyText Type: Rich text editor
Then on the navigation tab I would create the "DropdownContent" like this
Name: Dropdown text Alias:dropdownText Type:Textfield
And that's it.
I would set the width with CSS and I'm not sure what the "X" stuff is for.
Every node created in the content section is given an unique id, which is accessible through the API and XSLT etc. The linktext is just the nodename (unless you decide it could be different than the nodename, which is also going to be the url name of the page. Then you can add a "Header" to the "Content" tab and use the value from this field in your nav instead).
I hope this makes sense to you and it answers what you're asking.
For the record, the "x" is for situations where the the dropdown does not vertically align with it's parent. For example, take a look at http://searidgetech.com/. the "solutions and services" dropdown has a unique width and alignment because of it's size, while the other dropdowns are aligned to the left edge of their parents.
Creating a mega dropdown menu system in umbraco
I’m new to umbraco and am looking for some guidance. Here’s the situation:
I would like to create a mega dropdown menu system for my site. This would be a true mega dropdown ala http://www.useit.com/alertbox/mega-dropdown-menus.html, not a dropdown with multiple child flyouts. I have the code to make everything work on the client side. I’m just trying to figure out the best way to store the data in umbraco and create a ui for managing the menu. I understand that by going this route, the menu will not auto update. Editors will indeed be responsible for managing the links within the menu. I have already built a “menu manager” tool in my own bespoke CMS that has this functionality, but I would like to understand the best way to do this in umbraco.
Here is the data structure that I currently use:
menuId – int, primekey
linkText – text, the text for the top level link
linkUrl – text, the url for the top level link
linkTarget – text, optional
sort – int
dropdownContent - text
dropdownWidth – int, optional
dropdownX – int, optional
Hopefully it’s pretty self-explanatory. Each record consists of a top level link and its child content. The child content is stored in “dropdownContent”. The properties “dropdownWidth” and dropdownX are optional fields that provide extra control for a dropdown that is wider than the default, or needs to be positioned to somewhere other than the bottom left of the parent link.
I could add a table to the db and create my own ui to manage this, but I would rather keep it all in the the umbraco ui. Would a reasonable approach be to create a custom document type to store this information and treat the menu items as a distinct type of content? What is the best way to hand something like this?
Thanks
Hi Stewart
To create this menu you will of course need to define some document types that should make up your site.
On that document type I would create these tabs "Content" and "Navigation". You create document types in the "Settings" section of Umbraco.
On the "Content" tab I would at least create a property for the content of the page, with an alias of "bodyText". (This has nothing to do with the navigation, just the page content).
I would create it like this
Name: Content
Alias: bodyText
Type: Rich text editor
Then on the navigation tab I would create the "DropdownContent" like this
Name: Dropdown text
Alias:dropdownText
Type:Textfield
And that's it.
I would set the width with CSS and I'm not sure what the "X" stuff is for.
Every node created in the content section is given an unique id, which is accessible through the API and XSLT etc.
The linktext is just the nodename (unless you decide it could be different than the nodename, which is also going to be the url name of the page. Then you can add a "Header" to the "Content" tab and use the value from this field in your nav instead).
I hope this makes sense to you and it answers what you're asking.
/Jan
Hi Jan, thanks very much, that is a big help.
For the record, the "x" is for situations where the the dropdown does not vertically align with it's parent. For example, take a look at http://searidgetech.com/. the "solutions and services" dropdown has a unique width and alignment because of it's size, while the other dropdowns are aligned to the left edge of their parents.
is working on a reply...