I'd like to have a logo (say it's square for simplicity) with 4 links that pop up when it is moused over. These would be positioned Above, Below and to the sides of the menu/logo.
Is this achievable with only CSS? Any suggestions for how one might go about doing it?
Semantically I'd like to order them with in the page something like:
<ul><li>Logo
<ul><li class="north">North</li>
<li class="west">West</li>
<li class="east">East</li>
<li class="south">South</li>
</ul>
</li>
</ul>
But have them show up on the page like:
North
West Logo East
South
Yes.
HTML
<ul><li>Logo
<ul id="map"><li class="north">North</li>
<li class="west">West</li>
<li class="east">East</li>
<li class="south">South</li>
</ul>
</li>
</ul>
CSS
#map li a {
display: none;
}
#map li:hover a {
display: block;
}
Note that IE6 won't fire the :hover pseudo class on anything but links (you might want to change your markup).
Also simply use absolute positioning to position the popups.
See the general idea here.
Related
Myself in the beginning stages of javascript want to achieve the following.Say I had some li tags which are further included with some li tags like this.
<ul>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
</ul>
Now class 2 block is hidden originally in the page.My work is when someone hovers on a link of class 1 its respective block ( i.e., class 2) should display.But the code i had written is displaying all blocks having class 2
May be i can write a mouseover() function for each link of class 1,but is it correct?I had seen this type effect in some sites like linked in,awwwards.com
Example link is
Best Colorful Websites | Web Design Inspiration
In this link when mouse is hovered on a image,then for only on that image a symbol is display on corner bottomI want this type effect.
Can any please help me??Thanks in advance??
Well this can be achived with css only:
ul ul{
display:none;
}
ul > li:hover ul{
display:block;
}
try a fast css solution (not tested because you did not put a jsFiffle code axample)
ul li:hover ul li.2
{
display:block;
}
also, do not use only numbers in class names... will not work on some browsers
try class="c2" at least
Situation, such a menu:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
When I hover "LANGUAGES" I need to show up the other :
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
Necessary to make it work on CSS, JQuery or without JavaScript. Here's a version does not work:
.hover_top_right_menu {
display: none;
}
It's a wrong line
.top_right_submenu: hover, hover_top_right_menu {
display: visible;
}
You have some typos in your css
by default the element .hover_top_right_menu should have display: none. When you hover the submenu then you change its display (with display: block).
.hover_top_right_menu {
display: none;
}
.top_right_submenu:hover .hover_top_right_menu {
display: block;
}
Anyway this css is based on the assumption that the language list is nested into .hover_top_right_menu element, e.g.:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
As a side notes:
Unless you need to have an action on click event, the link around "LANGUAGES" is not necessary for the example
you're using empty markup, probably for styling purpose only. If you need to have an icon just place it as a background of that list-item (or as content property of its :before pseudoelement)
I have a links navigation that drops down on hover (which works fine) then slides right on hover of the li ul li element.
HTML:
<div id="main-links">
<div id="main-links-content">
<ul class="topnav">
<li><a class="link active" href="index.php">Aberdeen Taxis</a></li>
<li><a class="link" href="#!">About Us</a>
<ul class="dropdown">
<li>Who are we?
<ul>
<li>Meet the team</li>
</ul>
</li>
<li>Why use us?
<ul>
<li>Health & Safety Policy</li>
</ul>
</li>
<li>Our commitment to the environment
<ul>
<li>Environmental Policy</li>
</ul>
</li>
</ul>
</li>
<li><a class="link" href="#!">Our Services</a></li>
<li><a class="link" href="#!">Our Tours</a></li>
<li><a class="link" href="#!">Our Fares</a></li>
<li>Online Booking
<ul class="dropdown">
<li>Cash Booking</li>
<li>Account Booking</li>
<li>Credit Card Booking
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li><a class="link" href="#!">Contact Details</a></li>
</ul>
</div>
</div>
The JSFiddle link: http://jsfiddle.net/mrnaysilva/3Ucd4/
I believe the problem is here (but I may be wrong):-
#main-links-content ul ul ul {
left: 100%;
position: absolute;
top: 80px;
width: 180px;
max-width: 200px;
}
Basically I have set a width and top position. What I want to happen is that the width is set to auto, but when I set this to auto it doesn't set a width according to the paragraph text that's inside it. Also, because I have set a top position, it is always displaying the side menu on the bottom li, where as I want this to display to the right of the li element that is hovered.
i.e. If I hover over About Us and then hover over Who are we?.. Meet the team should display to the right of Who are we?.
I'm just unsure how I can achieve this.
The problem
The main problem that isn't working is the position: relative; of the sub <li> elements.
This is because you use display: table-row;
As stated in the specs:
The effect of 'position:relative' on table-row-group,
table-header-group, table-footer-group, table-row, table-column-group,
table-column, table-cell, and table-caption elements is undefined.
source: http://www.w3.org/TR/CSS2/visuren.html#propdef-position
How to solve this?
Well you can just use an element inside the table-row that will have the position: relative; property:
<li>
<div class="dropdownWrap">
Our commitment to the environment
<ul>
<li>
Environmental Policy
</li>
</ul>
</div>
</li>
Where the css of the .dopdownWrap is:
.dropdownWrap
{
width: 100%;
height: 100%;
position: relative;
}
jsFiddle
Note that i only did this with the "About us" tab.
Some notes about the javascript
You can just find the direct child element with the > selector. This way you don't have to exclude elements with the .not() function. More info here
Instead of defining .slideUp() and .slideDown() seperately, you can define them in one line ( this is because your speed of the animation is the same) with slideToggle.
Some notes about the css + html
If you're assigning classes and IDs to your elements you might as well use them in your css. For example: you never call the class .dropdown in your css. There are more of these IDs and classes that are never used.
Hope this helped you!
Edit
The jQuery UI function slide will function as this, because it will only play the mouseout function when the mousein function has completed. Normally you could cancel the previous animation with .stop(). But seems that jQuery UI slide doesn't support this. So i suggest you to just use plain jQuery for this:
$("#main-links-content li ul li").hover(function () {
$(this).find(' > div > ul').stop(true).animate({left: "100%"}, 300)
}, function () {
$(this).find(' > div > ul').stop(true).animate({left: ""}, 300);
});
Here a great article for this: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
I also added the .stop() function to the dropdown menu to fix any delay bugs.
jsFiddle
You may want to look at css transition, as it basically acts the same as you did now.
Here an css transition example: jsFiddle
The first slideToggle is not done in css as it easier and 'better' in jQuery(With css there wouldn't be a dynamic height, which would result in delay in animation).
I am using superfish menu and I am having a problem which I can't figure out although I'm sure the answer is probably obvious and I'm just missing it...
Basically my a elements are not expanding to fill their containing li elements, even though the a elements are set to display:block
Please see example here:
http://www.spiritlevel.co.uk/fpatest/index_hover2.html
css is here:
http://www.spiritlevel.co.uk/fpatest/css/superfish.css
http://www.spiritlevel.co.uk/fpatest/css/superfish-vertical.css
Here's the relevant HTML
<div id="homenav">
<ul id="nav" class="sf-menu sf-vertical">
<li id="company">COMPANY
<ul id="companymenu">
<li id="profilelink">Profile</li>
<li id="activitylink">Activity</li>
<li id="strategylink">Strategy</li>
<li id="teamlink">Team</li>
<li id="financelink">Finance & Governance</li>
</ul>
</li>
<li id="development">DEVELOPMENT
<ul id="developmentmenu">
<li id="partnerslink">Development Partners</li>
<li id="sociallink">Social Responsibility</li>
</ul>
</li>
<li id="projects">PROJECTS</li>
<li id="contact">CONTACT US</li>
</ul>
</div><!--end homenav -->
A second issue I am having is how to get the second level menu to appear in the same place for each first level link. If you hover over company then it's 2nd level nav appears in the right place. But if you hover over development, it appears 1 row too low - i would like it to appear in the same place as the company menu did
Can anyone help me out with this please? thanks
Remove padding-right from .sf-menu a.sf-with-ul (superfish.css line-93) and add width 100% or 140px (home.css line 75) in #nav li a. I've tested it on your site and works fine. Tested in chrome and ff.
The reason your links aren't expanding to fill the box is because they are floated left. Remove that and you should be fine.
Linking a background image with CSS is giving me so me issues. They seem pretty simple but I can't quite get around them:
I have list items for my main menu:
<div id="menuContainer">
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students">Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors">Visitors</li>
</ul>
my css sets the li to inline-block and gives defines the id's with a size and background image accordingly. I had to use zoom: 1; and *display: inline; for IE to work and everything shows up fine in IE for that now.
When I use text-indent: -9999px; to remove the text and leave the image, Chrome and Firefox works fine with this. However, in IE the whole li shifts the number of pixels listed.
Finally, In Chrome the entire image is the link, in IE and Firefox only the text is the link so with no text the menu has no function.
Any ideas?
You are using syntactically incorrect HTML. You can't wrap an <a> around a <li>. While fixing this may not necessarily make your problem go away, it will probably ensure that every browser behaves the same way.
You're not very clear about what you want to achieve, and what your menu looks like. If you want the whole area of the <li> to become clickable, you're probably best off giving the <a> a display: inline-block and fixed dimensions.
If you need more detailed answers, you may want to give us an online example.
First well form the html, then try your css again.
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students"> Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors"> Visitors</li>
</ul>
it's better to use line-height instead of text-indent. you need to use image replacement technique. like this
<ul id="menu">
<li><span>Home</span></li>
</ul>
and CSS
ul#menu li a { width: 100px; height: 20px; background: url(../images/myimage.gif) no-repeat 0 0; }
ul#menu li span { line-height: 200px; display: block; }