Styling gpEasy Menus

Styling gpEasy CMS menus is no different than styling any other unordered list. The class for the menus is .menu_top. The class is applied to the unordered list: <ul class="menu_top">.

Precautions

There are a few precautions you should take when styling menus. Depending on the theme there may be multiple menus called therefore you will always want to style the menus based on the location of that menu. For example, if I have a menu that is in the header I would want to use the header id or class to define the menu styling thus I would have something like: #header .menu_top {}

This will help ensure that you don't style the wrong menu.

The other caution is to realize that the site map uses the .menu_top for styling also but that usually isn't a big deal.

That's all there is to styling your gpEasy menus, but if you would like to get more precise. . .

Individual Menu Styling

While the .menu_top class is attached to each menu list you can also customize menus based on the type of menu you select. For example, you may select the "All Links" for your menu. In that case you still have the .menu_top to use however, the unordered list is wrapped by a DIV with the class of the menu type you selected, in this case it would look like: <div class="gpArea_FullMenu GPAREA"><ul class="menu_top">. This give you the option of styling with .gpArea_FullMenu or .gpArea_FullMenu .menu_top or just the .menu_top class. This allows you the greatest flexibility when styling your menus.

Menu types & their classes:
All Links = <div class="gpArea_FullMenu GPAREA"> <ul class="menu_top">
Expand All Links =<div class="gpArea_ExpandMenu GPAREA"> <ul class="menu_top">
Expanding Bottom Links = <div class="gpArea_ExpandLastMenu GPAREA"> <ul class="menu_top">
Top Level Links = <div class="gpArea_Menu GPAREA"> <ul class="menu_top">
Subgroup Links = <div class="gpArea_SubMenu GPAREA"> <ul class="menu_top">
Top Two Level Links = <div class="gpArea_TopTwoMenu GPAREA"> <ul class="menu_top">
Second & Third Level Links = <div class="gpArea_BottomTwoMenu GPAREA"> <ul class="menu_top">
Second Level Subgroup Links = <div class="gpArea_MiddleSubMenu GPAREA"> <ul class="menu_top">
Third Level Subgroup Links = <div class="gpArea_SubMenu GPAREA"><ul class="menu_top">

Custom Menu Classes
Custom menus have a class applied to them in a similar way. In general the class is .gpArea_CustomMenu_#,#,# where the # is the custom menu setting you selected. For example a custom menu with the setting of 1,0,0 will output <div class="gpArea_CustomMenu_1,0,0 GPAREA"><ul class="menu_top">

That covers all the current menu classes however I'm sure others will come up in the future. To find them simply set your menu to the desired setting and then look at the page's source code in your browser. That's all there is to it.

 

gpEasy B2sq Theme by CS @True Acupuncture