In this video tutorial we will learn how to create the “floating boxes” style of the Thesis Navigation Menu. This is the fourth of the tutorials on styling your new ecommerce website as part of the Build Your Own Ecommerce Website course.
In this tenth lesson we will use both Thesis Design Options and some custom CSS to accomplish this styling of the navigation menu. We’ll start of by gaining an introductory understanding of the structure and elements of the Navigation Menu. These include the HTML Structure, there is the Link Behavior, there are General Styles and then there are the Specific Styles. Next we’ll configure the Design Options. This includes styling structures we just covered in the previous section. Once we have gone as far as we can with Design Options we will finish styling by adding custom CSS styling to the text in the menu. Finally we will configure the width and spacing of the menu items resulting in equally sized and equally spaced tabs. We will also make various minor adjustments to complete the “floating boxes” style of the menu.
In this lesson you will:
Understanding the Thesis Navigation Menu Structure – Watch the Video
- HTML Structure – Review the navigation structure
- Link Behavior – Standard, Hover, Current, and Parent
- General Styles
- Specific Styles
Configuring the Navigation Menu with Thesis Design Options – Watch the Video
- Text Definitions – Style and Size
- Link Definitions
- Background Definitions
- Border and Submenu
Adding Custom Styling to the Menu Text – Watch the Video
- Identify the element in Firebug
- Review the CSS styles
- Test bold behavior – Adjust tab size
- Add to custom.css
- Test in all browsers
Set the Menu Item Width and Spacing – Watch the Video
- Test the width
- Add spacing
- Fix text with CSS
- Set submenu width
- Raise the menu
- Test in all browsers
