Who uses out of the box template for website any more? If you are using NetSuite Advanced Site Customization, you have the option to custom build the main navigation bar.
I've seen some posting on NetSuite Forum where fellow NetSuite users were asking for ability to build out dynamic menu system on their Webstore without heavy scripting. I am one of them.
Standard "Tabs" just doesn't do justice for my brilliant site layout. (I'm seriously being sarcastic here...)
So, how do you build this in WITHOUT heavy scripting? Well... unfortunately, you still need to do SOME scripting but method I found seems to work out without too much headache.
For my little project, I wanted to build dynamic horizontal menu layout.
In NetSuite, you can use <NLPAGETABS> to generate he horizontal tab menu layout. If you sue this tag nested between <table> and </table> tags in Logo and Tabs Template section under Body tab of your Theme.
As long as you have your tabs marked as "Show on Website", that one tag will render everything for you.
Here is sample menu tree I wanted to achieve:
| Home page | Products (Presentation Tab 0) | Shopping Cart | My Account |
| Product Page 1 (Presentation Tab A) | |||
| Product Page 2 (Presentation Tab B) | |||
| Product Page 3 (Presentation Tab C) |
When visitor mouse over to Products, I want three sub pages to show up. As noted above, each page is a presentation tab with different items.
If you were to ONLY use out of the box <NLPAGETABS>, those sub pages will get rendered as main navigation and will NOT look good.
Here is how I implemented dynamic custom main menu:
Step 1: Find the script you like.
I found a very handy, easy to use dynamic menu from Dynamic Drive. The script I found is very simple and not much modification is needed. Details of this script can be found here. Be sure to read their Terms of Use before using it. =)
I made some modifications to the CSS file to match the theme of my website.
Step 2: Upload script files, CSS files and any images to your NetSuite Document folder.
What ever file you decide to use, you need to first upload it to your documents folder to be referenced on your Webstore. Script that I found from Dynamic Drive is fairly small and simple which I really like.
Step 3: Implement. (This is implementation using the Script from Dynamic Drive)
- Make sure .js and .css files are referenced at the Header. [Your Theme] > General > Additon to <head> section.
Go to [Your Theme] > Body > Logo and Tabs Template section and add in your navigation.
Code Sample:
Main Navigation Code:
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" rel="dropmenu1">Products</a></li>
<li><a href="#">Shopping Cart</a></li>
<li><a href="#">My Account</a></li>
</ul>
</div>
** red="dropmenu1" indicates a reference to sub menu items.
Sub Menu Navigation Code:
<div id="dropmenu1" class="dropmenudiv">
<a href="#">Product Page 1</a>
<a href="#">Product Page 2</a>
<a href="#">Product Page 3</a>
</div>
Script Tag:
** Add this after you've placed all your menu item
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
You can customize it further to your liking. Please read the details on Dynamic Drive regarding this script.
It's not that bad. I changed the CSS just a bit to match my pages' colors and didn't touch the original script file.
If you'd like to see this page in action, please contact me by email. mhson1978@gmail.com
Oh yah, one note. If you customize the navigation this way, URL to pages will be a bit hard to manage. I've been looking into using Descriptive URL feature but its not working for me at the moment.
I've done some research on the Forum and some one DID say this:
You must have domain set up in order to use it.I've actually asked my network admin to put in a CNAME for me. So if it works, I'll let you guys know.
Let me know if you have any questions. NetSuite, do you guys know when you'll add this as Part of NetSuite feature?
Can you provide a URL to a NetSuite hosted site where you've used this process to make dynamic drop-down menus?
ReplyDeleteThanks
I added the URL to our Sandbox account. =)
ReplyDeleteMy apologies fellow readers. I had to take the link to our sandbox account for now. If you want to see it, please shoot me an email. thx.
ReplyDelete