whats the code for selected on my CSS menu?? (LEE!!)

  • 1
  • Question
  • Updated 9 years ago
  • Answered
lee!

i know you have the code for selected on a css menu, you gave it to me before but i cant find it!!

i couldnt set it up,

please help!!
thanks

aklex

http://filey.yolasite.com/
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes

Posted 9 years ago

  • 1
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Alex,

You could add a strong tag around the menu item, eg. Home , then in your css add a class for it, eg. '#sddm li strong'. This way you could change anything about that menu item to show it's the currently active page.

Is this what your after?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
could you tell me where to put it?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
does anyone know where to put the code that connor has given me??!!

im lost!
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i have tried some CSS menu selected state codes & they dont work on my menu,

please help!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

Perhaps the easiest thing to do would be just to add <b> tags to the page your on.

for example your menu page code will look something like this

<ul>
<li> <a style="text-decoration: none;" href="http://hexham.info">&lt;span>Home&lt;...>

just add <b> and </b> to the page you want to look selected.

<ul>
<li> <a style="text-decoration: none;" href="http://hexham.info">&lt;span>&lt;b>Ho...>

Try it and see how it looks.

Lee.

-->
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
great lee!

i will have a look @ that in the morn...

alex
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Alex!

I figured it out!! It took me awhile but it works!

Step 1:
In your CSS, find this code:
#sddm li a:hover
{ background: url(http://filey.yolasite.com/resources/i...}

REPLACE WITH THIS CODE:
#sddm li a:hover, #sddm li a.thispage:hover
{ background: url(http://filey.yolasite.com/resources/i...}

Step 2:

Add this code underneath the one you just replaced:
#sddm li a.thispage
{ background: url(http://filey.yolasite.com/resources/i...}

Then, in your HTML where you have your ul list, find this code:
<li><a href="http://filey.yolasite.com/&quot;&gt;H...;

REPLACE WITH THIS CODE:
<li><a href="#" class="thispage">Home</a></li>

That's it! =) You can do this for each of your pages. Just add the class="thispage" before the link you want to stay selected. Be sure to do Step 1 & Step 2 for each page as well.

I hope that makes sense. You can see an example of this on: http://littleustestsite.yolasite.com
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Perfect.:D
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Connor! =)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i cant figure out the top bit,

can you give me the code for the main CSS script?
(email)
i can get the part with the pages working.

alex
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Here you go Alex:

<style type="text/css">

#sddm
{ margin: 0;
padding: 0px;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: normal 18px Arial}

#sddm li a
{ display: block;
margin: 0 0px 0 0;
padding: 8px 4px;
width: 87px;
background: url(http://filey.yolasite.com/resources/i...;
color: #FFFFFF;
text-align: center;
text-decoration: none}

#sddm li a:hover, #sddm li a.thispage:hover
{ background: url(http://filey.yolasite.com/resources/i...}

#sddm li a.thispage
{ background: url(http://filey.yolasite.com/resources/i...}

#sddm li a:active
{ background-color:#5dc4d3}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #FF0033;
border: 0px solid #CCCCCC}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 6px 6px;
width: 83px;
white-space: nowrap;
text-align: Center;
text-decoration: none;
background: #66CC33;
color: #FFFFFF;
font: 11px calabri}

#sddm div a:hover
{ background: #FF6633;
color: #FFFFFF}

</style>
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks :)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
LU
look!

http://filey.yolasite.com/hotels

it works, & it looks great!

thanks soo much,

Alex
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You're very welcome!! I'm always glad to help out. =)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
LittleUs!

YOUR NAMES BACK!!

anway,

Your A ★

Alex
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Yes.. I changed it... we'll see if it stays permanently! =) I changed my name in the Yola account and changed it in the GS account.. so hopefully, that did the trick!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Alex.. perhaps you can star my response as answered? This way the thread does not need to look like it still needs an answer?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
ohh yeah!!

i forgot to do that, i will do it now :)
Alex
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
@ Alex - looks great - rememebr to add it to the bottom menus too.

@ Littleus - Your getting hot at writting CSS. Future job?

Lee.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
lol... nope! In actuality, I don't know how to write CSS. What I am good at is manipulating an existing CSS and making it work. =) I love mysteries and solving them is even better! =D
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
I think they are the exact qualitys required to be a pro CSS writter. Either that or a murder detective :)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i am not adding it the bottom, should i lee??
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
yes - why not?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
fair point...

i will do it,

alex
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
done lee,

like it?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Here's a thought Alex... I would actually delete that bottom menu. Your page is not very long and your top menu is still visible. I would only add that bottom menu if your page is long. Otherwise, it makes your content look squished and that you accidentally put it on twice? As always, you need to do what you feel is best for you though. =)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
well i havent added all the content to the site,

i have just added the pages & basic info.

i will keep it but i know what you are saying...

Alex