CODEWITHSUNDEEP
htmlcss
user3344884
user3344884

Reputation: 3

Need help achieving this effect (HTML & CSS)

I want to take the hover effect on the word "Dropdown" on this template (the gray/black box that appears when you put the cursor on it) and put it on the nav menu of this other template (from the same site)

I'm a beginner, I tried a lot of things but I just can't achieve the same effect. I tried copying the #nav code from the first template .css and pasting it on the another template css but it just copies the text, font, color but the hover effect is not there.

Thank you in advance and sorry for the stupid-ish question

Upvotes: 0

Views: 64

Answers (1)

Kelderic
Kelderic

Reputation: 6687

The dropdown effect on the first template is achieved using Javascript rather than pure CSS. You'll need to find the .js file in that template which is controlling it. I took a look at the source, which you can do by right clicking on the page and selecting View Source. The dropdowns are being controlled by a jQuery plugin called Dropotron.

https://github.com/n33/jquery.dropotron

If you add this to the new template you wish to use, you can achieve the same effect.

EDIT:

3 things are happening to create the hover effect on the word itself.

  • Background Color
  • Curved Corners
  • Inset White Border to make a slight 3D effect.

These are achieved with three CSS rules:

  • background
  • border-radius
  • box-shadow

The exact CSS is:

border-radius: 6px;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.024) inset, 1px 1px 0px 0px rgba(255, 255, 255, 0.024);

The background-color on the new theme's header is white, so you don't need the shadow. You would just insert this into the CSS file:

#nav ul li a {
    border-radius:6px;
}

#nav ul li a:hover {
    background:rgba(0, 0, 0, 0.15);
}

You can change the color if you want of course.

Upvotes: 1

Related Questions