Styling Drop Down Menus in ocPortal Part 2

dropdown menuThis post is the second part of styling an ocPortal drop down menu. In Part 1 I talked about the structure of ocPortal menus and how dropdown menus share many CSS styles making it tricky in some cases to make it look exactly how you want without splitting up the styling. If you haven’t done so, you should read part 1 first. This part of the tutorial gives some examples with explanations of what they will change.

Some Example rules

Here are a few different examples with better explanations.

We want to force the width of nlevel icons to 20px. I think they all are by default, but this will cover you in case you upload a larger image, and I wanted you to not break the layout. The images are put in with <img> tags, not as background images.

.menu_type__dropdown .nlevel .has_img img, .menu_type__popup .has_img img {

width: 20px;

}

If there is no theme image tied to the menu item then it will show a built-in menu bullet theme image as a background (not an <img> tag). The 14px indentation is to make space for the background.

.menu_type__tree ul li a, .menu_type__popup ul li a, .menu_type__dropdown ul.nlevel li a { /* ul li added to ensure precedence over “.nl li” selector, whilst not forcing us to use up our only !important */

padding-{!en_left}: 14px;

}

Setting of the default bullet theme image for the currently active page.

.menu_type__tree .current a, .menu_type__popup .current a, .menu_type__dropdown .nlevel .current a {

background: transparent url(‘{$IMG;,menus/menu_bullet_current}’) no-repeat 5px 6px !important;

}

Setting of the default bullet theme image.

.menu_type__tree .non_current a, .menu_type__popup .non_current a, .menu_type__dropdown .nlevel .non_current a {

background: transparent url(‘{$IMG;,menus/menu_bullet}’) no-repeat 5px 6px;

}

Setting of the default bullet theme image for a hovered link (link about to be clicked).

.menu_type__tree .non_current a:hover, .menu_type__popup .non_current a:hover, .menu_type__dropdown .nlevel .non_current a:hover {

background: transparent url(‘{$IMG;,menus/menu_bullet_hover}’) no-repeat 5px 6px;

}

…but remove any bullets again if we did actually have a theme image tied to the menu item.

.menu_type__popup .has_img.current a, .menu_type__dropdown .nlevel .has_img.current a {

background: none !important;

}

If we do actually have a theme image, we need to remove the 14px indentation. This also removes the bullets again; it’s not worth explaining why it happens twice, but there’s a reason!

.has_img a {

background: none !important;

padding-{!en_left}: 0 !important;

}

Standard padding around nlevel menu items.

.menu_type__select li, .menu_type__dropdown .nlevel li {

padding: 3px 5px !important;

}

ocPortal don’t explicitly set a width for the drop down, so we need to give a hint to the browser not to word wrap. That will mean the width used will be the smallest width for non-wrapped text. That’s not entirely true, as there is also a maximum width defined further down.

.menu_type__popup .nlevel li , .menu_type__dropdown .nlevel li {

white-space: nowrap;

}

Standard borders and line height for nlevel menu (NOT menu items, the whole drop down menu).

.menu_type__dropdown ul.nlevel, .menu_type__popup ul {

line-height: 1.4em;

border-top: 1px solid {$GET,standard_border};

border-left: 1px solid {$GET,standard_border};

border-right: 1px solid {$GET,standard_border};

}

Standard shadow effect for nlevel menu.

.menu_type__dropdown ul.nlevel {

{$BETA_CSS_PROPERTY,box-shadow: 3px 3px 10px {$GET,standard_border};}

}

Standard bottom border for nlevel menu items. Note that we put left/top/right borders on the menu itself, and we put bottom borders on each menu item. This makes it look like there is a border around each, but the way we’ve defined it prevents it getting doubled up for adjacent menu items.

.menu_type__popup .menu_spacer, .menu_type__popup li, .menu_type__dropdown .nlevel li, .menu_type__dropdown .nlevel .menu_spacer {

border-bottom: 1px solid {$GET,standard_border};

}

No underlined text for links.

.menu_type__popup a, .menu_type__popup a:visited, .menu_type__dropdown .nlevel a, .menu_type__dropdown .nlevel a:visited {

text-decoration: none;

}

…except when hovered.

.menu_type__popup a:hover, .menu_type__dropdown .nlevel a:hover {

text-decoration: underline;

cursor: pointer;

}

Most of the nlevel menu item styles.

.menu_type__dropdown .nlevel li, .menu_type__dropdown .nlevel .menu_spacer {

background-color: {$GET,dropdown_menu_background};

font-weight: normal;

/* We do want wrapping for this, as menu labels could be longer than the available space between the start of the dropdown label and the edge of the fixed width */

max-width: 15em;

white-space: normal;

}

nlevel menu item hover background colour.

.menu_type__dropdown .nlevel li:hover {

background-color: {$GET,dropdown_menu_text};

}

nlevel menu item link colour

.menu_type__dropdown .nlevel, .menu_type__dropdown .nlevel a, .menu_type__dropdown .nlevel a:visited, .menu_type__dropdown .nlevel a:hover {

color: {$GET,slightly_seeded_text} !important;

}

top-level menu item background colour

.menu_type__embossed, .menu_type__top, .menu_type__dropdown, .menu_type__embossed li, .menu_type__top li, .menu_type__dropdown li.toplevel {

background-color: {$GET,area_background};

}

Slightly different styles for toplevel menu item of CURRENT PAGE

.menu_type__embossed .current, .menu_type__top .current, .menu_type__dropdown .toplevel.current {

color: {$GET,slightly_seeded_text};

background-color: {$GET,area_highlight_left_complement_background} !important;

font-weight: bold;

}

Slightly different styles for toplevel menu item of HOVER

.menu_type__embossed a:hover, .menu_type__top a:hover, .menu_type__dropdown a.toplevel_link:hover {

background-color: {$GET,area_highlight_right_complement_background} !important;

{$BETA_CSS_PROPERTY,transition: color\,background-color 0.5s linear;}

}

Padding for toplevel menu items.

.menu_type__top a, .menu_type__dropdown a.toplevel_link {

padding: 0.5em 0.5em 0.6em 0.5em !important;

}

Styles for toplevel menu item, makes the <a> actually become a rectangle taking up the full <li> as opposed to just a textual hyperlink.

 .menu_type__embossed a, .menu_type__top a, .menu_type__dropdown a.toplevel_link {

display: block;

outline: 0;

}

Font size for toplevel menu items.

.menu_type__top a, .menu_type__dropdown a.toplevel_link {

font-size: 0.9em;

}

Top and bottom borders for toplevel

.menu_type__top, .menu_type__dropdown {

/* Invisible borders to stop margin collapsing */

border-top: 1px solid {$GET,standard_border};

border-bottom: 1px solid {$GET,standard_border};

}

Various styles for toplevel menu items, including borders to put to the left of each item, a float rule to make links sit neatly side by side, and a CSS animation to make the background colour hover change have a fade effect

.menu_type__top li, .menu_type__dropdown li.toplevel {

float: {!en_left};

border-{!en_left}: 1px solid {$GET,standard_border};

margin-{!en_right}: -1px;

margin-bottom: 0;

{+START,IF,{$MOBILE}}

font-size: 0.9em;

{+END}

{$BETA_CSS_PROPERTY,transition: color\,background-color 0.5s linear;}

}

The last toplevel menu item was not given a width and is not floated, so it automatically takes up the remaining space (otherwise we might be out by 1 pixel or so, due to rounding errors). It has no left border because the border goes on the <a> tag for this one (technical reasons).

.menu_type__top li.last, .menu_type__dropdown li.toplevel.last {

float: none !important; /* so it eats all space remaining */

overflow: hidden; /* so it is shunted against it’s left-hand neighbours without overlapping */

margin-{!en_right}: 0 !important; /* as would cause wrapping with the overflow hidden */

position: relative; {!en_left}: -1px; /* In place of margin-right */

border-left: 0;

}

We don’t put a left border on the FIRST toplevel menu item because it’s meant to be flush with the border at the left-hand edge of the page

.menu_type__top li.first, .menu_type__dropdown li.toplevel.first {

border-left: 0;

}

Put the left border on the last toplevel menu item

.menu_type__top li.last a, .menu_type__dropdown li.toplevel.last a {

border-left: 1px solid {$GET,standard_border};

}

Set a maximum size for the theme images on the toplevel, and adjust their position slightly

.menu_type__top img, .menu_type__dropdown .toplevel_link img {

max-width: 17px;

margin-top: -2px;

}

Set nlevel menu item theme images to float to the left of the link text, and have a little spacing

.menu_type__top img, .menu_type__dropdown img {

float: {!en_left};

padding: 0 8px 0 3px;

}

I can understand this might be quite overwhelming and I definitely recommend testing everything thoroughly before putting anything at all live. If you do get stuck I recommend posting on the ocPortal forums as there are a lot of CSS knowledgeable people on there who should be able to help.

Looking for quality Hosting for your ocPortal website? Look no further than Arvixe Web Hosting!

If you want, you can Follow me on Google plus or Follow me on Twitter

Tags: , , , , , , , , , , , , | Posted under ocPortal | RSS 2.0

Author Spotlight

Steve Jarvis

Steve Jarvis

Hi I'm Steve, I've been using computers in one form or another since i was 5 with a Dragon 64 and building websites since the late 90's. I'm currently employed as a digital marketing person for Planet X Bikes. When not writing blog posts or working i'm a family man (Wife and Daughter) and a PC Gamer

Leave a Reply

Your email address will not be published. Required fields are marked *


5 × 4 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>