Mobile web page navigation elements

The mobile pages do not contain lots of information mostly they contain quick links to services and simple information.

The content section of the pages in our template are mostly navigation elements.

We have 3 primary types of navigation elements all made as slightly different lists of links.

Main Navigation list

List of Links with icons

Our main navigation consist of a list containing links an icon left and a right pointing arrow. This is very much like settings menus on an iPhone or iPod but more colorful.

NOTE: The icons were set on each link tag as a background with an inline style so you could edit the icon for a nav link without opening any other files.

The Links with icons CSS for these is primarily in the ios.css file. The use of the > bracket in lines like this "body > #content > #nav > ol" help especially when you have nested IDs like #nav inside #content. The icons for this style are exactly 48 by 48 pixels. In the tools and freebies post you will find out more about getting nice icons.

/* navigation - list of links with icons */
body > #content > #nav > ol{ font-size:18px; font-weight:bold;
margin: 0px 0; padding: 0; width: 100%; border-top: 1px solid #dadada;
}
body > #content > #nav > ol > li { padding: 1px 0px 3px 0px;
margin: 1px 0px 0px -5px; border-bottom: 1px solid #dadada;
line-height:29px; list-style-type: none; padding-left:3px;
background: url(/m/images/listArrow.png) no-repeat right center;
}
body > #content > #nav > ol > li > a {
display: block; padding: 10px 22px 10px 55px;
overflow:hidden; text-decoration: none; color:#1F497D;
}

Nav Links without icons use id=navnoicon

The nav noicon list does have some redundant CSS to the #nav ID CSS when I have time would change that so navnoicon was a class inside a #nav id with only a couple lines of CSS to modify the left padding. Perhaps one of you might try that.


<div id='navnoicon'>
<ol>
<li><a href='http://search.ebscohost.com/mydatabase/login/'>My database Link</a></li>
<li><a href='http://search.ebscohost.com/otherdatabase/login/'>other Link</a></li>
</ol>
</div>

The navnoicon CSS for smart devices

Note it is nearly the same as #nav but only 3 pixel padding on the left instead of 55.

/* navnoicon navigation list of links without icons  */
body > #content > #navnoicon > ol{ font-size:18px; font-weight:bold;
margin: 0px 0; padding: 0; width: 100%; border-top: 1px solid #dadada;
}
body > #content > #navnoicon > ol > li {
margin: 0px 0px 0px -5px; border-bottom: 1px solid #dadada;
line-height:29px; list-style-type: none; padding-left:3px;
background: url(/m/images/listArrow.png) no-repeat right center;
}
body > #content > #navnoicon > ol > li > a {
display: block; padding: 10px 22px 10px 3px;
overflow:hidden; text-decoration: none; color:#1F497D;
}

Lists with Drop Down sub lists – Requires a small javascriptCategory Drop list

This navigation element lets you divide long lists into categories, click on a category and get a drop down list of each item in that category. Like a list of databases by subject area. This one I hope to refine because coding the main and subsists list by hand takes some care as it is.

This is just a nested list with certain classes applied to the main list and sub list. A javascript changes the CSS attribute for the sublist from display:hidden to display:show and vice versa when clicked on.

The html

Each list and sublist must have a unique id the LI tag of the main ID must also end in “-show” then the onclick runs a simple java function on the ID.

Like this:

<div id=’navnoicon’>

<ol id=”categories”>

<li><a href=”#” id=”StartGen-show” class=”showList” onclick=”showHide(‘StartGen’);return false;”>Start Here/Gerneral</a></li>

<ol id=”StartGen” class=”sublist”>

<li><a href=”http://search.ebscohost.com/mydatabase/login/”>Academic Search Complete</a></li>

<li><a href=”http://mobile.jstor.org/”>JSTOR</a></li&gt;

</ol>

<li><a href=”#” id=”Art-show” class=”showList” onclick=”showHide(‘Art’);return false;”>Art</a></li>

<ol id=”Art” class=”sublist”>

<li><a alt=”Art” href=”http://search.ebscohost.com/art2database/login/”&gt;

Art &amp; Architecture Index</a></li>

<li><a href=http://mobile.artstor.org/”>ARTStor</a></li>

</ol>

</ol>

</div>

The javascript for the Lists with drop down sublist

Super simple

function showHide(shID) {

if (document.getElementById(shID)) {

if (document.getElementById(shID).style.display != ‘block’) {

document.getElementById(shID+’-show’).style.background = ‘url(/m/images/arrowdown.png)’ +

‘#fcf3da no-repeat left center’;

document.getElementById(shID).style.display = ‘block’;

}

else {

document.getElementById(shID+’-show’).style.background = ‘url(/m/images/arrow.png)’ +

#fcf3da no-repeat left center’;

document.getElementById(shID).style.display = ‘none’;

}

}

}

Advertisements

About mobilelibraryinacan

Library tech person 4 20 years
This entry was posted in Mobile HTML and CSS, Mobile Navigation Elements, mobile web design and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s