The Joomla! Forum ™






Post new topic Reply to topic  [ 5 posts ] 
Author Message
PostPosted: Thu Apr 28, 2011 7:10 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed Apr 27, 2011 10:06 am
Posts: 3
After a bit of tinkering, I got my menu working as I wanted at least partly. Right now I am trying to find out how I display a different picture behind the text of the currently selected menu. I want one picture that shows as I hover over each menu item, and that part works as it should. However, I would also like any menu item that I click on to remain highlighted, to show the user what part of the site that is displayed.

This is the menu related css that I have so far.

Code:
.joomla-nav {
  background:url(http://www.akr.se/Foretagsportalen/images/menu.jpg) repeat-x left;
  background-color:#ffffff;
  border-style:none;
  height:30px;
  overflow:hidden;
  padding:0;
  margin:0;
  height:1%; /* fixing IE 6 */
 
}
.joomla-nav li {

  float:left;
 height:30px;
  list-style-type:none;
 
  padding-top:0px;
  padding-bottom:0px;
  margin:0;
 
}
.joomla-nav li a {
 

  color:#222;
  cursor:pointer;
  display:block;
  float:left;
  font-weight:bold;
  height:30px;
  padding-top:5px;
  padding-left:10px;
 
}
.joomla-nav li a, .joomla-nav li a:focus, .joomla-nav li a:hover {
 
  text-decoration:none;
}
.joomla-nav li a:focus, .joomla-nav li a:hover {
  background:url(http://www.akr.se/Foretagsportalen/images/menuhover.jpg) repeat-x top;
 
  color:#ffffff;
  outline:none;
}
.joomla-nav li.label {
  font-weight:normal;
}


Any help with how I can display a picture for the curretly active menu item would be greatly appreciated. Feel free to check out how the menu looks so far at www.akr.se/Foretagsportalen

Thank you :)


Top
 Profile  
 
PostPosted: Thu May 12, 2011 6:28 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu May 06, 2010 2:20 am
Posts: 14
Ignore my post from the last thread- I see where you placed it. Where did you place the code to get the striped background on your site?

Your site looks great- very elegant!


Top
 Profile  
 
PostPosted: Fri May 13, 2011 4:29 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed Apr 27, 2011 10:06 am
Posts: 3
In my index.php (located in the templates/Atomic folder) I have added 'class="mainbody"' to the <body> tag.

Code:
.mainbody
{
 
  background:url(http://www.akr.se/Foretagsportalen/images/bg.png) repeat;

}


was then added to the css to create the background. I am not sure if the 'repeat' is needed.


Top
 Profile  
 
PostPosted: Fri May 27, 2011 10:11 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Tue Mar 25, 2008 8:18 pm
Posts: 723
Location: Sweden / Haninge
The li element that are currently selected has id current and class selected, so you can simply use something like this
Code:
.joomla-nav #current{background:url(../../../images/menuselected.jpg) repeat-x }

or

.joomla-nav .selected{background:url(../../../images/menuselected.jpg) repeat-x }

_________________
“We can't solve problems by using the same kind of thinking we used when we created them."


Top
 Profile  
 
PostPosted: Thu Mar 22, 2012 1:47 am 
Joomla! Intern
Joomla! Intern

Joined: Thu Mar 22, 2012 1:15 am
Posts: 76
Location: Norway
I just checked your site to see your menu but it was offline.

I really like mega menus so I have used on here : http://sweddata.com you can check the menu if you select a region from right side of the page.
I'm also designing a new website http://swednews.com which will be based on joomla but for link shortening services. and I will use pictures on the its mega menu.

_________________
ParsiGate website www.parsigate.com is a free classified site ( آگهی رایگان )
ٌ200: www.200.st is a Wordpress blog for testing.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 



Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group