• Locked
3 replies [Last post]
Mon, 2016-05-30 14:53
Pannon
Pannon's picture
Offline
newbie
Last seen: 7 years 6 days ago
Timezone: GMT-4
Joined: 2016-05-30
Posts: 3
Points: 4

I have a simple vertical menu, here's the CSS:

.gradientmenu{
	list-style-type: none;
	margin: 125px 0;
	padding: 0;
	width: 160px;
}
 
.gradientmenu li a:link, li a:visited  {
	border-radius: 20px;
    background: #17988a; 
    background: -webkit-linear-gradient(#17988a, #a7f9f0);
    background: -o-linear-gradient(#17988a, #a7f9f0); 
    background: -moz-linear-gradient(#17988a, #a7f9f0);
    background: linear-gradient(#17988a, #a7f9f0);
	font: Verdana, "Trebuchet MS", Helvetica, sans-serif;
	font-size: 1.0em;
	color: #fbf4da;
	line-height: 0.8em;
	display: block;
	width: auto;
	height: 12px;
	padding: 10px 0;
	padding-left: 20%;
	text-decoration: none;
	text-transform: uppercase;
	margin-bottom: 20px;
}
 
.gradientmenu li a:hover, li a:active  {
    background: #a7f9f0;
    background: -webkit-linear-gradient(#a7f9f0, #17988a); 
    background: -o-linear-gradient(#a7f9f0, #17988a); 
    background: -moz-linear-gradient(#a7f9f0, #17988a);
    background: linear-gradient(#a7f9f0, #17988a);
	color: #e8534c;
}

The link, visited link and hover links work as intended to. The href in the HTML code does have the class="active" for the active page, but it doesn't work.

I've been trying to make it work, but so far my efforts did not result in a resolution. The site is in the designing phase, currently runs in XAMPP on my machine. Could anyone point me to where this CSS code went wrong?
TIA

Top
Tags:
Mon, 2016-05-30 15:46
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

What do you mean by :active?

The :active state references the moment when the link is clicked or the return/enter key is pressed. Its purpose is to tell the user that something is, indeed, happening.

Is that what you're looking for, or something else?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Mon, 2016-05-30 16:19
#2
Pannon
Pannon's picture
Offline
newbie
Last seen: 7 years 6 days ago
Timezone: GMT-4
Joined: 2016-05-30
Posts: 3
Points: 4

gary.turner wrote: The

gary.turner wrote:

The :active state references the moment when the link is clicked or the return/enter key is pressed. Its purpose is to tell the user that something is, indeed, happening.

Is that what you're looking for, or something else?

cheers,

gary

Thanks gary...

Maybe it is my misunderstanding, but...

The active link refers to the currently loaded link, or viewed page. The hover link on the other hand is activated, if and when the mouse is moved over the link, or use the keyboard to tab to the new link. Am I misunderstanding how the CSS menu work?

In either case...

I'd want to display the same font color as the hover link for the link that is being viewed. And that is not working, based on the code posted earlier.
TIA...

Top
Mon, 2016-05-30 16:28
#3
Pannon
Pannon's picture
Offline
newbie
Last seen: 7 years 6 days ago
Timezone: GMT-4
Joined: 2016-05-30
Posts: 3
Points: 4

Here's how I'd like to look

Here's how I'd like the menu to look, currently hovering over it. Once clicked, the background and font color should stayed the same after the page has been loaded.

AttachmentSize
menu.jpg 8.25 KB
Top
  • Locked