Solved

JQuery Wordpress link hover functionality

Posted on 2011-02-16
6
327 Views
Last Modified: 2012-05-11
Hi all,

I want to simulate some functionality I've seen on wordpress where you have a link and when you hover on that link you get some optons (links) under it...

For example: <li><a href="#">Some Link</a></li>

Some when you hover on Some Link you get this under it...

Not Hover =
Some Link


Hover =
Some Link
edit | delete | etc

Hope this helps

THanks


0
Comment
Question by:error77
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34911108
Try the Hover Plugin. It allows you to add HTML to the hovered object. You can even add images to the hover effect.
0
 

Author Comment

by:error77
ID: 34911421
Oh I think I might not have explained it properly. I'm trying to imitate some wordpress functionality but this is not for wordpress. I just need something using HTML, CSS , Javascript , not a wordpress plugin.

Hope this helps

Thanks again
0
 

Author Comment

by:error77
ID: 34924746
Anyone please?
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 500 total points
ID: 34925866
This is a pure CSS solution that has a hover menu. The example I am sending is very basic, but I think it is what you are talking about. Save the code as .html and preview in a browser to see what I am talking about.

<style type="text/css">
 <!--
ul.topmenu li ul {
display:block;
position:absolute;
left:0;
top:1.5em;
visibility:hidden;
width:10em;
z-index:1000;
background-color:#fff;
border:1px solid #000;
border-top:0;
}

-->

<!--
ul.topmenu a {
color:black;
text-decoration: none;

}

ul.topmenu li ul li {
display:block;
width:100%;
background-color:#fff;
color:#000;
margin:0 0 5px;
padding:0;
}

ul.topmenu li ul li a {
display:block;
width:95%;
color:#000;
margin:0;
padding:0 0 0 5%;
}

ul.topmenu li.submenu:hover {
padding-bottom:30em;
}

ul.topmenu li.submenu:hover ul {
left:0;
visibility:visible;
width: 100%;
float: left;
}

ul.topmenu li.submenu:hover ul li {
margin-bottom:0;
}

ul.topmenu li.submenu:hover ul li:hover {
background-color:#ccc;
}

-->

<!--
ul.topmenu,ul.topmenu ul {
display:block;
width:13%;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:16px;
background-color:#DDD;
font-family:Verdana, Geneva, sans-serif;
font-size:12pt;
color:#888;
text-align:center;
margin:0;
padding:1px;
float: left;
}

ul.topmenu li {
display:inline;
list-style:none;
position:relative;
margin:0;
padding:0 15px 0 0;
}
 </style>
 <ul class="topmenu">
   <li></li>
 <li class="submenu"><a href="#">Link with drop-down</a>
 <ul>
 <li><a href="#">Sub-item 1</a></li>
 <li><a href="#">Sub-item 2</a></li>
 </ul>
 </li>
 </ul>

Open in new window

0
 

Author Closing Comment

by:error77
ID: 34926152
Perfect! THanks a million.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34926272
You're welcome.
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question