If you’ve been following the story so far (here and here) you’ll see that so far in Actinic Online I’ve come up with a straightforward but attractive design I think is achievable, and also worked out how to get at the CSS of the site to start implementing some custom fonts, colours, graphics and backgrounds.
Next job was to add in a top menu, a sidebar menu and a footer menu. Unsurprisingly, to get at these you go to ‘Site > Menus > All Menus’
Configuring menus in Actinic Online is a neat distillation of everything that is great, and everything that is frustrating, about Actinic Online.
It’s great because it’s so intuitive to add an item to any menu in the design. Simply highlight an existing menu item and a little pop-up menu comes up within an option to ‘Add a New Menu Item’. You can even ‘Add a Sub-menu’ in order to automatically generate drop-downs (from the top menu) or flyouts (from the side menu).
So adding a menu item is dead easy. The interesting part comes when you want to link a menu item to a page or category you’ve already created in Actinic. To do this you have to edit the ‘Navigation Behaviour’ of the menu item. In English it means you have to tell Actinic Online what happens when you click on it. So something as simple as creating a link to a section means having to add/edit a link and then:
- Click the ‘…’ button under ‘Navigation’ behaviours
- Set ‘Type of Behaviour’ to ‘Display one of the site components’
- Under ‘Component’ select the ‘Shopping Cart: Catalog’
- Under ‘Opening Mode’ select ‘Propose a category and/or brand’
- Under ‘Category’ select the category you want to display
- Click ‘OK’
A bit long-winded huh?
But then like everything with Actinic Online, simple things might seem overly complicated but that’s because there is a huge amount of other things you could do. So instead of linking to a section you could link it to a brochure page, or a search page, or a login page or you could link to a completely different web site, or link to a file, or… or… etc. etc.
PERHAPS A BIT FRUSTRATING
The frustration hits around now though, because it’s around this time you realise that there is no way to just tell Actinic Online to automatically create navigation to the categories in your store. Every simple link to a category has to be added manually. Not a problem for my store because I’ve only got one category at the moment. I can see myself risking RSI though when I need to add navigation for a large store in future.
BACK TO AMAZING AGAIN
OK, that’s the downside. But that’s pretty much the only downside. And there are massive upsides to enjoy too.
As well as putting text links into menus, you can also put in headers, images and separators. These aren’t much use in the header and footer menus, but these are great for the sidebar menus. In my case I wanted to include an image of some gift card designs. So I added a ‘header’ called ‘Gift Cards’ and then I added the image of the gift cards underneath it. Then I set up a ‘navigation behaviour’ for the image so when people click on it they get a bigger version of the image opening in a pop-up. Then I put in a separator and underneath that added a header of ‘Store Information’ and added in links for ‘Delivery’, ‘Returns’ and ‘Terms and Conditions’.
It sounds simple, but things like this had to be manually coded in HTML in Actinic. Now they can be managed via a neat user interface. I can certainly see how it’ll be simple enough to show customers how to manage a range graphical promotions in the sidebar which link to different brands and promotions.
Best thing about the menus is that HTML-wise they are all standard unordered lists which are easy to style.
You’ll see the following styles in the stylesheet:
#headermenu / #verticalmenu / #footermenu – wrappers around the header / sidebar / footer menus
ul#hmenu / ul#vmenu / ul#fmenu – the actual header/sidebar/footer menus
li.mitext – list item containing a text link
li.miimg – list item containing an image
li.mititle – list item containing a title
li.misep – list item containing a separator
ul.submenu – a dropdown/flyout submenu
So for my design I just needed to position #headermenu correctly and give it a translucent background. Then I pretty much took out all css borders and backgrounds for the links in the top menu so they looked like standard text links.
All the links in the top bar by default float to the left, but I needed my final link (to the shopping basket) floating to the right. To do this I edited the properties of the link and used the ‘Associated CSS Class’ field to give it a class of ‘basket-link’. I could then add a reference in the CSS that floated a link with a class of ‘basket-link’ to the right rather than the left.
The sidebar and footer menus were edited in a very similar way, which then just left the job of styling up my products and categories. This is where it starts getting (even more) interesting, but I’ll cover that in the next article.