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: Need help with Tabbed Menu using CSS.  (Read 2577 times)

Status

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 64
Need help with Tabbed Menu using CSS.
« on: September 18, 2007, 08:08:40 am »

OK, so here's whats going on, I found this template online, and have more or less made it  workable with snews (I mean, it isn't that hard in the first place...)

One thing however is getting me stuck, it's the tabbed menu. I think it's tabbed anyway.

Ok, I want the Current page, and the hover-over links in the menu to show the same Image(s).

I have got the Main image working the way it is meant to. its the 2nd image, that isn't working, the 2nd image closes the tab.

The CSS Section Looks like this:
Code: [Select]
#menu {
width: 962px;
height: 50px;
margin: 0 auto;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
display: block;
float: left;
 margin: 0;
display:inline;
}

#menu a {
display: block;
float: left;
height: 38px;
padding: 8px 20px 0 20px;
text-decoration: none;
text-transform: lowercase;
color: #000000;
}


#menu .current {
background: url(images/img05.gif) no-repeat;
}

#menu .current span {
background: url(images/img06.gif) no-repeat right top;
font-weight: bold;
}

#menu a:Hover {
background: url(images/img05.gif) no-repeat;
}

#menu a:Hover span {
background: url(images/img06.gif) no-repeat right top;
}

I have Put in <span></span> into the snews file as well (IE: <a href=...><span>Home</span></a> [Note: I didn't change the other stuff before or after the Home bit in the snew, so it still have the .1 or what ever that is])

anyway, It comes out like this:

Note the little Box thing on the E, that is img06.gif not working.

The Template can be found here: http://www.freecsstemplates.org/preview/extended
Just a quick FYI, The template doesn't have the hover over thing, I am putting that in.
Logged

Ken Dahlin

  • Full Member
  • ***
  • Karma: 30
  • Posts: 139
    • http://www.kendahlin.com/
Re: Need help with Tabbed Menu using CSS.
« Reply #1 on: September 19, 2007, 08:01:48 am »

How about adding a function in your index.php or snews.php that does something like this:

Code: [Select]
<?php
function navmenu() {
$categorySEF get_id('category'); $pageSEF get_id('article'); $home l('home_sef');
$class = (empty($categorySEF) || $categorySEF == $home && empty($pageSEF)) ? ' class="current"' '';
echo '<li'.$class.'><a href="'.db('website').'" title="'.l('home').'">'.l('home').'</a></li>';
$class = ($categorySEF == 'archive') ? ' class="current"' '';
echo '<li'.$class.'><a href="'.db('website').'archive/" title="'.l('archive').'">'.l('archive').'</a></li>';
$query "SELECT * FROM ".db('prefix')."articles WHERE position = 3 ORDER BY id"
$result mysql_query($query);
while ($r mysql_fetch_array($result)) {
$title $r['title'];
$class = ($pageSEF == $r['seftitle'])? ' class="current"' '';
if ($r['id'] != s('display_page')) {echo '<li'.$class.'><a href="'.db('website').l('home_sef').'/'.$r['seftitle'].'/" title="'.$title.'">'.$title.'</a></li>';}
}
$class = ($categorySEF == 'contact') ? ' class="current"''';
echo '<li'.$class.'><a href="'.db('website').'contact/" title="'.l('contact').'">'.l('contact').'</a></li>';
$class = ($categorySEF == 'sitemap') ? ' class="current"''';
echo '<li'.$class.'><a href="'.db('website').'sitemap/" title="'.l('sitemap').'">'.l('sitemap').'</a></li>';
}
?>


It's just a hack of the regular pages() function that changes the location of class=current from the "a" tag to the "li". Then all you would have to do is replace the "pages()" in your index.php with "navmenu()" and then you could leave most of the original css alone except for changing the name of the class from "current_page_item" to "current".
Logged

Status

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 64
Re: Need help with Tabbed Menu using CSS.
« Reply #2 on: September 19, 2007, 08:41:32 am »

That did work, However, Is there a way i can make the hover over do the same?

Logged

Ken Dahlin

  • Full Member
  • ***
  • Karma: 30
  • Posts: 139
    • http://www.kendahlin.com/
Re: Need help with Tabbed Menu using CSS.
« Reply #3 on: September 20, 2007, 06:50:33 am »

That did work, However, Is there a way i can make the hover over do the same?

Sure... try this:

Code: [Select]
#menu :Hover {
background: url(images/img05.gif) no-repeat;
}

#menu a:Hover {
background: url(images/img06.gif) no-repeat right top;
}
Logged

Status

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 64
Re: Need help with Tabbed Menu using CSS.
« Reply #4 on: September 20, 2007, 08:28:07 am »

That Worked...

Karma for you  ;D
Logged