2 levels menu
Modern template for easy maintenance
CSS World has a main philosophy; getting all layout (as possible) out of html. This little effort is worthy because we have a lot less job to do when we want to modify something (modify width of a box, colors or background images). You modify it into the .ccs file and ALL your pages are changed automaticly!
Below, with short green lines, you see empty sections ("div") with a class nane. There is no text inside, because they are "layout sections" only. class="header_top" place a thin image of a box top with rounded corner. As you already imagine, class="header_bot" add bottom round corner to our boxes.
That brief introduction is important as it is the knowledge necerrary to have your template "in hand". All pages in Weather Blues Template use that structure.
Now that we have explained header structure... we are ready to put hands in the mud!
First, be safe! Take a copy of your current page, before doing modifications!
As you see above, Weather Blues header is composed of 3 different images, sliding continuously. but these beautifil pictures are only suggested presentation, you could adapt it to meet your needs and taste.
The easiest way to modify this header is to change photos in that slideshow for something more representative of your city or "dream place". To do so, just remind these things:
Slideshow library used, is actually set to default parameters; but we can easily change these parameters to suit your needs,
We see in the frame above, the lines who initiate the header slideshow; you'll find these lines at real buttom page, just before </body>. The interesting part is the word nivoSlider(), like you see parentheses are empty. Empty say to nivoSlider to use its defaults, but betweem these parentheses we could specify one or all of these parameters below.
Then there is a lot to try to find your own configuration (double slash "//" represent comments). For further details, I invite you to go to this link to see all possibilities and complete way to use it.
If you want, you could easily remove slideshow for a page. If a conflict occur with something you want to add, or if you find that a page is too slow.
In <head>...</head>, remove this line.
In <div class="header">...</div>, remove these lines.
Your new <div class="header">...</div>, should look like this :
Finally, just before </body>, remove these lines.
Now, you know almost all about this slider in page header... all that could be good to make your page really different!
In the Weather Blues v2 template, menus are stored into a separate file. You will find a file named: header_menu.php. This file contain main menu comment like this one <!-- main menu --> it shows you where the menu begins. The menu structure is like this:
In the file header_menu.php, you will see these structures. Some important things to know to understand your new menu system:
So these menus are pretty alike those you've see in any other menu, apart that the menu file contain many menus. To link the main menu with submenus, the "trick" is the command rel="..." only available in main menu. This is a "relation" established between a main menu item and a submenu id. As usual, "id" need to be unique, then each submenu have to be identified by a unique "id".
Last thing, the "<a href="#"...>" link. When an item of main menu refer to a submenu, you're having 2 choices: Keep this main menu item "disabled" by using "#" or point to a file, acting as a category link.
To "call" your menu in each page, you will see an include like this: include('header_menu.php'). This tell Php to replace that line with content of file header_menu.php... isn't simple?
That kind of menu inclusion simplify a lot our pages management, but it lack an important feature: menu item highlighting! To show to the visitor where is he in our site, menu highlight is a must! But as we don't want to write in each page "your are on menu item X page", we have to use this "trick":
You'll see the code above in every page, just after our menu inclusion. A comment remind you the way it's working: A function called tabdropdown.init do highlighting, with 2 parameters: first one is the id of your menu surrounded by quotes (eg. "mainmenu"). The last one is a number from 0, representing which menu item to highlight (0 = Index. 1 = Recent, 2 = History... and so on, from left to right).
In Weather Blues Main (index) page, have number 0, and only that page (because no submenu for this item). For menu items in Recent, all pages under this "category" have number 1; in case you create a page "recent" that page will also keep 1 as its init number. Then, remember, if you insert an item on mainmenu, you have to change numbers on each page following the new item.
For further details, you could see that link