Anybody have any tips on trying to change the color of the content background on the Icons when you hover over them and the content box shows up.
I just can't seem to inspect the area, because I cant get my mouse to inspect the background because it vanishes once my cursor is actually on it.
Screenshot - http://postimg.org/image/cspn2nxf5/full/
http://techwizdesign.com/cap/homecap/
From what I can see this is being generated in the DOM
<a href="http://techwizdesign.com/cap/contact-us/" class="av-icon-char" style="font-size:100px;line-height:100px;width:100px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" data-avia-icon-tooltip="
<ol>
<li>Contact Us</li>
<li>Get a Quote</li>
<li>Upload a File</li>
</ol>
"></a>
If you look at the closing body tag you'll find this block which the javascript turns on and off - style at will
<div class="avia-tooltip avia-icon-tooltip avia-tt" style="left: 591.1875px; top: 309px; opacity: 0; display: none; "><div class="inner_tooltip">
<ol>
<li>Contact Us</li>
<li>Get a Quote</li>
<li>Upload a File</li>
</ol>
</div><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></div>
Related
So, i want to make an active links in navbar, but it's working only on "Pocetna" page, but not on others...this is what i've done:
<nav>
<ul>
<li class="active">Pocetna</li>
<li>Forum</li>
<li>Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
and this is in my style.css :
nav li.active{
color: #CCCCCC;
}
I'm using bootstrap...
Did you create a HTML-file for each of your navlinks?
If you did, please do the following:
1. Go to your 'Forum' HTML index file, and change the Navbar to:
<nav>
<ul>
<li>Pocetna</li>
<li class="active">Forum</li>
<li>Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
2. Then go to your 'Galerija' HTML index file, and change the Navbar to:
<nav>
<ul>
<li>Pocetna</li>
<li>Forum</li>
<li class="active">Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
Do you understand where I'm going with this? You only need to add the class="active" to your active HTML index file.
Don't touch the CSS unless you wish to change the active color of your Navbar links.
Here is example for my code
<style>
.hover:hover,.active{color:red}
</style>
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
If you mouse over on blog, there will be two red words
i am trying to find a way to disable "home" when you mouse over any other word
and then it back red if you moved the mouse away
After long search with google, i finnally found javascript code
And tried to modify it to work, but no luck
Here is a pure CSS solution, that will work so long as you have a wrapper element for there li's, which you should.
<style>
.menu:hover .active {
color: black;
/*reset the color to the default*/
/*you could also use color: inherit*/
}
.hover:hover,
.active,
.menu:hover .active:hover {
color:red
}
</style>
<ul class="menu">
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
</ul>
One thing I am noticing right off is the improper markup
there is no
that may not have anything to do with it.
<style>
.hover:hover,.active{color:red}
</style>
<ul>
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
</ul>
not exactly sure what you are trying to do
here is a fiddle http://jsfiddle.net/happymacarts/tfqw93tk/
maybe paste the js code you found and see if we can figure out your issue
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.