Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Author Topic: Navigation - current page highlighting  (Read 2386 times)

rakun

  • Newbie
  • *
  • Karma: 0
  • Posts: 3
Navigation - current page highlighting
« on: September 26, 2010, 03:07:53 PM »

Hi,

What is the easiest way to produce current page highlighting in navigation menu? For example: when i look at home page, home menu link has a white border. I have simple menu coded directly in index.php

Code: [Select]
<div id="top">
<ul id="topmenu">
<li><a href=".">Home</a></li>
<li><a href="about-us">About us</a>
<ul>
<li><a href="company">Company</a></li>
<li><a href="structure">Structure</a></li>
</ul>
</li>
<li><a href="#">Capabilities</a></li>
                </ul>
         </div>

and a simple css to go along with it
Code: [Select]
#top {
float:left;
text-align:left;
width:100%;
    background-color:#f2f2f2;
}

#topmenu, #topmenu ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;

 }
 
 #topmenu a:link, #topmenu a:active, #topmenu a:visited{
    display:block;
line-height:25px;
    padding:0px 5px;
    color:#333;
    text-decoration:none;
background-color:#f2f2f2;
 }

#topmenu a:hover{
    background-color:#0100bb;
    color:#fff;
}

#topmenu li{
display: block;
line-height: 25px;
color: #fff;
background-color: #0100bb;
margin:0;
    float:left;
    position:relative;
}

#topmenu ul {
    position:absolute;
    width:12em;
    top:25px;
    display:none;
}

#topmenu li ul a{
    width:12em;
    float:left;
}

#topmenu ul ul{
top:auto;
}

#topmenu li ul ul {
margin:0px 0 0 10px;
    left:12em;
}

#topmenu li:hover ul ul, #topmenu li:hover ul ul ul, #topmenu li:hover ul ul ul ul{
    display:none;
}

#topmenu li:hover ul, #topmenu li li:hover ul, #topmenu li li li:hover ul, #topmenu li li li li:hover ul{
    display:block;
}

It looks pretty and neat but I was hoping to find a solution to highlight current page in my menu. I've tried some css hacks but they mostly ask to add a different class to body tag of every page. Tried some javascript (http://snook.ca/s/291) that clear href="" part of current page link, but I couldn't find a css part of that solution. Basically what you have after clearlink.js kicks in is a <li>Home</li> part of code and when you edit #topmenu li in css it messes up everything.
« Last Edit: September 26, 2010, 05:23:22 PM by rakun »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Navigation - current page highlighting
« Reply #1 on: September 26, 2010, 09:07:00 PM »

Apparently you're not using sNews - if you were, you'd get current page highlighting automatically.
The simple way of doing it is to add classname "current" to your current page's menu item and then styling it to your liking.

Example:

HTML
Quote
<ul id="topmenu">
         <li><a class="current" href=".">Home</a></li>
         <li><a href="about-us">About us</a>
            <ul>
               <li><a href="company">Company</a></li>
               <li><a href="structure">Structure</a></li>
            </ul>
         </li>
         <li><a href="#">Capabilities</a></li>
                </ul>

CSS
Code: [Select]
.current {style:goes here;}
sNews uses .current to highlight the current page menu item so it might be a good idea to use it in your non-sNews sites as well, to keep things consistent. My first recommendation would be to use sNews though, since this forum is all about sNews... ;)
Logged

rakun

  • Newbie
  • *
  • Karma: 0
  • Posts: 3
Re: Navigation - current page highlighting
« Reply #2 on: September 26, 2010, 09:36:32 PM »

Actually, I am using sNews but not <?php pages(); ?> inside my index.php. The reason for that is that I want to have pages with subpages so I can have menu items with submenu items. Thats why I went with the completely custom navigation menu solution. Maybe I've missed something and there is actuality a possibility to create parent-child pages in sNews. If so, please share.
« Last Edit: September 26, 2010, 09:44:10 PM by rakun »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Navigation - current page highlighting
« Reply #3 on: September 27, 2010, 07:42:31 AM »

Ah, "I see" said the blind man...
There's currently no way (that I know of) to make child-pages to sNews pages. Sorry. Keyrocks had a mod for creating pages in categories, but that's not the same thing and (probably) not what you're after. I can't think of a good way of doing what you want short of adding a class - like "current" - manually for every page, but that's dreary and can amount to a lot of work, I know.
Sorry. Maybe someone else has a good idea.
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Navigation - current page highlighting
« Reply #4 on: September 27, 2010, 08:08:25 AM »

I’m too using sNews, and I did that :
Code: [Select]
// MENU NAVIGATION
function navbar() {
function menu($url, $text) {
global $categorySEF;
$class = ($categorySEF == $url) ? ' class="current"': '';
if (!empty($url)) $url .= '/';
echo '<a'.$class.' href="'._SITE.$url.'">'.$text.'</a> ';
}
menu('', l('home'));
//menu('archive', l('archive'));
//$qwr = !_ADMIN ? ' AND visible=\'YES\'' : '';
$qwr = !_ADMIN ? ' AND visible=\'YES\' AND published=1' : '';
$query = "SELECT id, seftitle, title FROM "._PRE.'articles'." WHERE position = 3 $qwr ORDER BY artorder ASC, id";
$result = mysql_query($query);
while ($r = mysql_fetch_array($result))
// UNCOMMENT TO DISPLAY PAGE LINKS
{
//if ($r['id'] != s('display_page')) {
//menu($r['seftitle'], $r['title']);
//}
}
menu('contact', l('menu-contact'));
//menu('sitemap', l('sitemap'));
menu('blog', l('blog'));
}
Bad code but it works. :-\
DEMO: => Here

« Last Edit: September 27, 2010, 08:10:49 AM by Sven »
Logged

rakun

  • Newbie
  • *
  • Karma: 0
  • Posts: 3
Re: Navigation - current page highlighting
« Reply #5 on: September 28, 2010, 07:10:58 PM »

Thanks Sven, but your page has only one level menu. I've pulled something out with jQuery. I added this inside my <head> tags in index.php
Code: [Select]
<script type="text/javascript">
$(function(){
var path = jQuery.url.segment(2);
if(!path)
{
$('#topmenu li a[href$="."]').attr('class', 'current');
}else{
$('#topmenu a[href$="' + path + '"]').attr('class', 'current');
}
});
</script>

and to my style.css I added this
Code: [Select]
#topmenu a.current{
    background-color:#3c3cff;
    color:#fff;
}

Well it works, but now I would like it to highlight my parent menu item as well as my child menu item. Guess it hits the wall there cause this jQuery script handles only currently viewed link (with help of a jquery.url.js plugin which asks for a second segment of my url e.g. about-us). Problem also rises in a form of breadcrumbs. Maybe it would be prettier if they would show the path of my clicking e.g. "Home . About us . Company". In reality they the "About us" and shoot straight to "Home . Company".  Again there is a big question mark after the question why is snews created without child-parent pages? Hope it will be implemented some time soon.
Logged