Styling Drop Down Menus in ocPortal Part 1

dropdown menuI’ve talked previously about adding a dropdown menu to your ocPortal site and now I want to talk more about styling the menus themselves.  First of all this is quite a complex area of styling and should not be attempted unless you have a very good understanding of CSS. I’m not going to walk through a step by step process as it will all depend on how you want your menu to look on your own site. What this post aims to do is explain how things work with the CSS for Dropdown menus in ocPortal.

One issue you will come across is that as-standard drop down menus share some of the same styles with other ocPortal menu types. For example the popup and dropdown menu types look very similar which is because the second level of each menu type is the same. Also the embossed and top menu types look very similar to the top level of a dropdown menu. This means if you want to make a radical departure away from the default theme you are going to have to split things up.

Here’s a fairly simple example:

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

text-decoration: none;

}

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

text-decoration: underline;

cursor: pointer;

}

Both popup and dropdown menu types will underline links only if you put your mouse over them, and also make the mouse cursor change. Let’s pretend you don’t want hover underlines for dropdown menus but you do for popups, you might split it up like…

.menu_type__popup a, .menu_type__popup a:visited {

text-decoration: none;

}

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

text-decoration: none;

}

.menu_type__popup a:hover {

text-decoration: underline;

cursor: pointer;

}

.menu_type__dropdown .nlevel a:hover {

cursor: pointer;

}

As you can see, I removed “text-decoration: underline;” from “.menu_type__dropdown .nlevel a:hover”.

Of course, I didn’t need to split it all up, but I just wanted to give you a clear example. This is designed to be a relatively advanced tutorial so please thoroughly test any changes before putting anything live.

ocPortal Menu Structure

I want to explain how dropdown styles are structured. The main concept is “toplevel” and “nlevel”. nlevel is anything that is not top level (i.e. level 2 and deeper).

All the menus are surrounded with a div that basically looks like

<div class=”menu_type__<menutype>”>

</div>

This is how we are able to target rules to specific menu types, just by putting “.menu_type__dropdown” on the start of the selector.

Generally the HTML structure of drop down menus will be like…

<div class=”menu_type__dropdown”>
<ul class=”nl”>
<li width=”…” class=”toplevel first”>
<a class=”toplevel_link first” …>…</a>
<ul class=”nlevel”>
<li class=”nlevel has_img”>
<img … />
<a…>…</a>
</li>

</ul>
</li>
….
<li class=”toplevel last”>
<a class=”toplevel_link last” …>…</a>
<ul class=”nlevel”>

</ul>
</li>
</ul>
</div>

The ‘current’ and ‘non_current’ classes are splashed around a bit too, as appropriate.

For menu items… Sometimes we place styles on <li>’s, and sometimes on the <a>’s inside. It depends exactly what we’re trying to do, or may be arbitrary.

You may wonder what ‘spacers’ are. Blank menu items work as spacers, and there are rules to render those. It’s unlikely you’ll want them, so ignore any selectors talking about spacers.

In part 2, I’ll give some more detailed examples of things you can change

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 *


1 × 7 =

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>