Custom HTML Menus for Category Pages
Once all of my site pages are built and my content is in place, I can begin to link everything together. Just like I had previously done with the home page of my site to link up to the category pages, I can now do the same to my category pages to link them up to the new pages I've created on the site. I could use a custom HTML menu for these category pages that is basically identical to the one I used on the home page of the site. However, I thought I would actually use a slightly different design for these pages just to give you some variety that you can use for your own sites. There really isn't a right or wrong way to do this for your own home page and category pages - whatever works best for your content, your niche, and the variety of pages you'll be building on the site. I have three category pages: buying guide, consumer concerns, and brands. I also have a sub-category page for Pinzon. All four of these pages will be receiving this new custom HTML menu. At the bottom of each of those four pages, I have headers and some text that go along with each of the sub-pages that I will be linking to from these category pages. This is the portion of my content that will be getting turned into a custom HTML menu. Create Custom Menu HTMLTo start, I have my basic format that I am using for each of these menu items:
This HTML code works just like it did for the home page. The portions in capital letters will get replaced with your own content. Simply re-use this same base code for each menu item on each of the category pages. I have taken this code and applied it to the first menu item on the brands page. I have uploaded an image to be used along with this menu item. That image, the page title, and also the Read More text at the end of the page description all get linked to the page. At this point, you should be familiar with performing these tasks. However, if you find you need a refresher, just refer back to the previous class for more detailed info on creating links or uploading images. You can see my final HTML code for this particular example below:
There are a total of three menu items like this on this particular page for my site. Unlike the home page, I do not need to add any additional HTML code after all of the menu items. I will then repeat this same process for all of my category and sub-category pages throughout the site. Next, I need to add CSS code for this new menu design. Start by going to the Weaver II Admin in the Appearance menu.
Now, navigate to the Advanced Options tab and then the <HEAD> Section tab.
This is the same page we visited in the last class to add CSS code for the home page menu. Look for the Custom CSS Rules header. The large text box there should already contain your CSS code for the home page menu. DO NOT erase the home page menu CSS that we previously saved there. We want to add new CSS code to the bottom of that existing code without messing up anything that is already there. Just scroll down to the very bottom of the existing code. Create a blank line after all existing code and curly brackets. I've already created the CSS code for you that you will need to use for this particular menu, just like I did for the home page menu. You should not need to make any alterations to this code, although you are more than welcome to do so and adopt it for your own use if you are comfortable doing so. Now, copy all of CSS code below and paste it into that blank line.
Below you can see the Custom CSS Rules section. The line that starts with .dcg-box2 marks the beginning of this new code, while the previous code was the home page menu CSS.
After you add the new CSS to the existing code, click the Save Settings button. You can now look at the live site to see your menus in action. I've shown a menu item here from the brands page I have created, so you can see how this looks on my site:
I like this setup because it puts links at the top, bottom and right-hand side of each menu item. Since it is a larger menu item because of the description, I like having the better link coverage and also believe it makes it more clear to site visitors that these sections are linking up to additional content on the site. If you have not done so already, be sure to revisit the home page as well to complete menu links to the various pages of your site. For my site, I had a number of blank page links that needed to be completed once those pages were actually created. © Site Construction 2/2 >>> Back to TABLE OF CONTENTS <<< | |
| Views: 491 | |
| Total comments: 0 | |