The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Making nav bar changed when rolledover?

View previous topic View next topic Go down

Solved Making nav bar changed when rolledover?

Post by Agent24 on May 18th 2010, 12:37 am

how do you make the nav bar so when you roll your mouse over it, it changes to something different? An examlpe is on this forum. when you roll over "Home" button it changes from blue to orange.


Last edited by Agent24 on June 4th 2010, 4:20 pm; edited 1 time in total

Agent24
Forumember

Male Posts : 813
Reputation : 72
Language : English, Spanish
Location : California

Back to top Go down

Solved Re: Making nav bar changed when rolledover?

Post by AlphaPkz on May 18th 2010, 3:24 am

I believe you need to edit your CSS

AlphaPkz
Forumember

Male Posts : 251
Reputation : 0
Language : English | Cantonese | Mandarin

Back to top Go down

Solved Re: Making nav bar changed when rolledover?

Post by Agent24 on May 18th 2010, 3:57 am

@AlphaPkz wrote:I believe you need to edit your CSS
do you know what i need to put?

Agent24
Forumember

Male Posts : 813
Reputation : 72
Language : English, Spanish
Location : California

Back to top Go down

Solved Re: Making nav bar changed when rolledover?

Post by Agent24 on May 19th 2010, 3:16 am

bump

Agent24
Forumember

Male Posts : 813
Reputation : 72
Language : English, Spanish
Location : California

Back to top Go down

Solved Re: Making nav bar changed when rolledover?

Post by Agent24 on May 20th 2010, 3:08 am

bump...

Agent24
Forumember

Male Posts : 813
Reputation : 72
Language : English, Spanish
Location : California

Back to top Go down

Solved Re: Making nav bar changed when rolledover?

Post by Agent24 on May 21st 2010, 5:43 am

bump..........

Agent24
Forumember

Male Posts : 813
Reputation : 72
Language : English, Spanish
Location : California

Back to top Go down

Solved Re: Making nav bar changed when rolledover?

Post by harvengure on May 21st 2010, 6:36 am

While I do not approve of simply giving you the code as I've seen nothing to indicate you'd either understand or have attempted to find it yourself, this forum is about helping others so I will simply give you a couple of examples.

Without knowing the forum version you are using I am forced to be vague but for a css roll-over menu you would use html such as the following:
Code:

<div id="main-nav">
   <ul>
      <li><a href="#" class="home"><span>Home</span></a></li>
      <li><a href="#" class="about"><span>About us</span></a></li>
      <li><a href="#" class="faq"><span>F.A.Q.</span></a></li>
      <li><a href="#" class="contact"><span>Contact</span></a></li>
   </ul>
</div>
And then style it with the following CSS placed in the head section of your html:
Code:

<style type="text/css">
#main-nav{
   width:400px;
   height:50px;
   margin:0 auto;
   background:#acacac url(img/menu-bg.jpg) no-repeat;             
}


#main-nav ul{
   border: 0;
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: center;
   clear: left;
}

#main-nav ul li{
   display: block;
   float: left;
   text-align: center;
   padding: 0;
   margin: 0;
}

#main-nav ul li a span{
   display:none;
}


#main-nav ul li a{
   width:100px;
   height:50px;
   margin:0px;
   padding:0px;
   display: block;
      
}

/* -- Hovers -- */

#main-nav ul li a.home:hover{
   background: url(img/menu-bg.jpg) 0px -50px;
}

#main-nav ul li a.about:hover{
   background: url(img/menu-bg.jpg) -100px -50px;
}
#main-nav ul li a.faq:hover{
   background: url(img/menu-bg.jpg) -200px -50px;
}         
#main-nav ul li a.contact:hover{
   background: url(img/menu-bg.jpg) -300px -50px;
}      
</style>
While if you wish and have the patients to use jQuery, someone has a very good tutorial on your desired result here.

harvengure
Forumember

Posts : 86
Reputation : 0
Language : English

Back to top Go down

Solved Re: Making nav bar changed when rolledover?

Post by Agent24 on May 22nd 2010, 3:36 am

@harvengure wrote:While I do not approve of simply giving you the code as I've seen nothing to indicate you'd either understand or have attempted to find it yourself, this forum is about helping others so I will simply give you a couple of examples.

Without knowing the forum version you are using I am forced to be vague but for a css roll-over menu you would use html such as the following:
Code:

<div id="main-nav">
   <ul>
      <li><a href="#" class="home"><span>Home</span></a></li>
      <li><a href="#" class="about"><span>About us</span></a></li>
      <li><a href="#" class="faq"><span>F.A.Q.</span></a></li>
      <li><a href="#" class="contact"><span>Contact</span></a></li>
   </ul>
</div>
And then style it with the following CSS placed in the head section of your html:
Code:

<style type="text/css">
#main-nav{
   width:400px;
   height:50px;
   margin:0 auto;
   background:#acacac url(img/menu-bg.jpg) no-repeat;             
}


#main-nav ul{
   border: 0;
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: center;
   clear: left;
}

#main-nav ul li{
   display: block;
   float: left;
   text-align: center;
   padding: 0;
   margin: 0;
}

#main-nav ul li a span{
   display:none;
}


#main-nav ul li a{
   width:100px;
   height:50px;
   margin:0px;
   padding:0px;
   display: block;
      
}

/* -- Hovers -- */

#main-nav ul li a.home:hover{
   background: url(img/menu-bg.jpg) 0px -50px;
}

#main-nav ul li a.about:hover{
   background: url(img/menu-bg.jpg) -100px -50px;
}
#main-nav ul li a.faq:hover{
   background: url(img/menu-bg.jpg) -200px -50px;
}         
#main-nav ul li a.contact:hover{
   background: url(img/menu-bg.jpg) -300px -50px;
}      
</style>
While if you wish and have the patients to use jQuery, someone has a very good tutorial on your desired result here.

i have researched it and i found one code but when i insert it, nothing happens

Agent24
Forumember

Male Posts : 813
Reputation : 72
Language : English, Spanish
Location : California

Back to top Go down

Solved Re: Making nav bar changed when rolledover?

Post by harvengure on June 4th 2010, 11:51 am

Did the code I gave you work?

harvengure
Forumember

Posts : 86
Reputation : 0
Language : English

Back to top Go down

Solved Re: Making nav bar changed when rolledover?

Post by Agent24 on June 4th 2010, 4:19 pm

Yes it did thanks Smile
I forgot to mark this solved
Solved

Agent24
Forumember

Male Posts : 813
Reputation : 72
Language : English, Spanish
Location : California

Back to top Go down

Solved Re: Making nav bar changed when rolledover?

Post by RoNo on June 4th 2010, 8:16 pm


As stated by the author, this topic is solved.
RoNo

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum