Having trouble with the following code. Hover mouse over the help icon, then mouse to the right and the event fires multiple times and the span "rubber-bands" up and down. Suggestions on how to alleviate this?
HTML
<div class="help">?<span>Help text.</span></div>
CSS (SCSS)
div.help {
position: relative;
margin-right: 8px;
bottom: 1px;
box-sizing: border-box;
cursor: pointer;
font-size: 14px;
display: inline-block;
text-align: center;
line-height: 14px;
width: 16px;
height: 16px;
color: white;
font-weight: bold;
background-color: blue;
border-radius: 8px;
transition: all 0.25s ease;
z-index: 5;
&:hover {
background-color: orange;
}
> span {
text-align: left;
position: absolute;
display: none;
min-width: 300px;
top: 0;
left: 20px;
font-weight: normal;
padding: 15px;
background-color: orange;
border-radius: 8px;
}
}
JS (JQuery)
$(document).ready(function() {
$(".help").mouseenter(function() {
$(this).find("span").show("fast");
}).mouseleave(function() {
$(this).find("span").slideUp("fast");
});
});
I have tried:
$(".help span").mouseenter(function() {
event.preventDefault();
});
// In mouseenter event:
// event.stopPropagation();
Give it a try here:
https://codepen.io/sorensend/pen/VQZzxO
Try this:
$(document).ready(function() {
$(".help").mouseenter(function() {
$(this).find("span").show("fast");
}).mouseleave(function() {
$(this).find("span").slideUp("fast");
});
$(".help span").mouseleave(function(event) {
event.stopPropagation();
});
$(".help span").mouseenter(function(event) {
event.stopPropagation();
});
});
example: https://codepen.io/anon/pen/oEvGNK
Related
I'm new to angular and I'd like to use a greedy navigation as the link below
https://codepen.io/lukejacksonn/pen/PwmwWV
but the problem is that I've been warned not to use document.queryselector(".myElement") for attaching JS eventListeners directly to any DOM element in angular.
Which would be the best way in angular to manage changes in DOM element properties like div's width or any other property of a particular element?
<nav class='greedy-nav'>
<button><div class="hamburger"></div></button>
<ul class='visible-links'>
<li><a target="_blank" href='https://github.com/lukejacksonn/GreedyNav'>Greedy</a></li>
<li><a href='#'>navigation</a></li>
<li><a href='#'>that</a></li>
<li><a href='#'>handles</a></li>
<li><a href='#'>overflowing</a></li>
<li><a href='#'>menu</a></li>
<li><a href='#'>elements</a></li>
<li><a href='#'>effortlessly</a></li>
</ul>
<ul class='hidden-links hidden'></ul>
</nav>
#color-1: #ff9800;
#color-2: #f57c00;
#color-3: #ef6c00;
body {
min-width: 320px;
padding: 30px;
background: #ff9800;
font-family: Helvetica, sans-serif;
}
h1 {
color: #fff;
font-weight: bold;
margin-top: 2rem;
font-size: 24px;
}
p {
color: #fff;
margin-top: 10px;
font-size: 14px;
line-height: 18px;
max-width: 50ex;
}
p.large {
font-size: 1.2rem;
margin-top: 2rem;
}
a {
color: #fff;
}
.greedy-nav {
position: relative;
min-width: 250px;
background: #fff;
a {
display: block;
padding: 20px 30px;
background: #fff;
font-size: 18px;
color: #color-1;
text-decoration: none;
&:hover {
color: #color-3;
}
}
button {
position: absolute;
height: 100%;
right: 0;
padding: 0 15px;
border: 0;
outline: none;
background-color: #color-2;
color: #fff;
cursor: pointer;
&:hover {
background-color: #color-3;
}
&::after {
content: attr(count);
position: absolute;
width: 30px;
height: 30px;
left: -16px;
top: 12px;
text-align: center;
background-color: #color-3;
color: #fff;
font-size: 14px;
line-height: 28px;
border-radius: 50%;
border: 3px solid #fff;
font-weight: bold;
}
&:hover::after {
transform: scale(1.075);
}
}
.hamburger {
position: relative;
width: 32px;
height: 4px;
background: #fff;
margin: auto;
&:before,
&:after {
content: '';
position: absolute;
left: 0;
width: 32px;
height: 4px;
background: #fff;
}
&:before {
top: -8px;
}
&:after {
bottom: -8px;
}
}
.visible-links {
display: inline-table;
li {
display: table-cell;
border-left: 1px solid #color-1;
}
}
.hidden-links {
position: absolute;
right: 0px;
top: 100%;
li {
display: block;
border-top: 1px solid #color-2;
}
}
.visible-links li:first-child {
font-weight: bold;
a { color: #color-1 !important; }
}
.hidden {
visibility: hidden;
}
}
var $nav = $('.greedy-nav');
var $btn = $('.greedy-nav button');
var $vlinks = $('.greedy-nav .visible-links');
var $hlinks = $('.greedy-nav .hidden-links');
var breaks = [];
function updateNav() {
var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
// The visible list is overflowing the nav
if($vlinks.width() > availableSpace) {
// Record the width of the list
breaks.push($vlinks.width());
// Move item to the hidden list
$vlinks.children().last().prependTo($hlinks);
// Show the dropdown btn
if($btn.hasClass('hidden')) {
$btn.removeClass('hidden');
}
// The visible list is not overflowing
} else {
// There is space for another item in the nav
if(availableSpace > breaks[breaks.length-1]) {
// Move the item to the visible list
$hlinks.children().first().appendTo($vlinks);
breaks.pop();
}
// Hide the dropdown btn if hidden list is empty
if(breaks.length < 1) {
$btn.addClass('hidden');
$hlinks.addClass('hidden');
}
}
// Keep counter updated
$btn.attr("count", breaks.length);
// Recur if the visible list is still overflowing the nav
if($vlinks.width() > availableSpace) {
updateNav();
}
}
// Window listeners
$(window).resize(function() {
updateNav();
});
$btn.on('click', function() {
$hlinks.toggleClass('hidden');
});
updateNav();
I have been stuck on a sliding down menu, but have made some headway with it. I had to modify a lot to make it work for both desktop and mobile viewports. The only thing I am stuck on now is getting the menu to close in a < 640px viewport.
In my snippet and jsfiddle below there is a lot of code, but the only code that really matters to this question is the javascript below:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
Basically my else statement is now removing the class 'activeSol` and then sliding up the selection.
In the mobile viewport, after clicking on "Solutions" the menu expands, but when you click on "Solutions" again, nothing happens.
It seems as if the variable relative is never reading as the class appended to it, making the click function run else. I did a simple console.log and the else never runs. I tried changing the click function to a change, but then the menu never triggers.
Does anyone see what is causing my else statement to not removeClass from serviceNav and slideUp?
JSfiddle link to see in mobile viewport.
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('activeSol');
$('body').css('overflow', 'auto');
e.preventDefault();
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>
var relative = $(this);
Is picking the serviceClick list item (li) and then you are checking
if (!relative.hasClass('activeSol')) {
but you never added the class to the li, instead you added it to the div #serviceNav.
I think changing
if (!relative.hasClass('activeSol')) {
to
if (!$('#serviceNav').hasClass('activeSol')) {
should work.
Your shouldn't check for $("#serviceClick") for class activeSol, should check on $("#serviceNav") instead.
if (!$('#serviceNav').hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
relative doesn't have the class 'activeSol' and will never have it, in order to have it toggle the visibility of your menu, you should add and remove classes to it, like this:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('opened')) { // if it's not opened
relative.addClass('opened'); // open it
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else { // if it's opened
relative.removeClass('opened'); // close it
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
Need help.
I want to make content input are same as keyin when selected and disable dropdown when edit at textarea.
Currently, content will appear after dropdown. When key-in at textarea and select that list, its not appears same as key-in at top when close. After select that list, when try to key-in, dropdown will open. How to disable it.
$(document).on('click', '.btn-select', function (e) {
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
var target = $(e.target);
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$('.dropinput').click(function(e) {
e.stopPropagation();
});
.form-control {
background-color: #fff;
background-image: none;
border: 1px solid #e9e9e9;
border-radius: 3px;
box-shadow: none;
color: #4f5858;
display: block;
font-size: 13px;
height: 34px;
line-height: 1.42857;
padding: 6px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
font-weight: normal;
margin: 0px;
}
.form-control:focus {
border-color: #b6b6b6;
box-shadow: none;
outline: 0 none;
}
.close {
color: #4f5858;
text-shadow: none;
font-weight: normal;
font-size: 26px;
opacity: 1.0;
}
.close:hover, .close:focus {
color: #000;
opacity: 0.5;
}
.form-control::-moz-placeholder {
color: #4f5858;
}
.btn-grey {
background-color: #fff;
border: 1px solid #e9e9e9;
border-radius: 50%;
color: #4f5858;
cursor: pointer;
display: block;
font-weight: 300;
height: 60px;
margin: 0px auto 0;
text-align: center;
text-transform: uppercase;
transition: opacity 0.25s ease-in-out 0s;
width: 60px;
font-size: 11px;
display: inline;
}
.btn-grey:hover {
border: none;
color: #fff;
background-color: #f05423;
}
.btn-select {
position: relative;
padding: 6px;
width: 100%;
border-radius: 3px;
}
.btn-select .btn-select-value {
padding: 2px 6px;
display: block;
position: absolute;
left: 0;
right: 35px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
border: none !important;
}
.btn-select .btn-select-arrow {
float: right;
line-height: 18px;
padding: 3px 10px;
top: 0;
font-size: 10px;
}
.btn-select ul {
display: none;
background-color: #fff;
color: #4f5858;
clear: both;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
right: -0.5px;
left: -1px;
top: 33px;
z-index: 999;
}
.btn-select ul li {
padding: 6px;
text-align: left;
background-color: #fff;
display: flex;
}
.btn-select ul li:hover {
background-color: #fff;
color: #f05423;
}
.btn-select ul li span {
color: #b3b3b3;
position: absolute;
left: 10px;
}
.btn-select ul li.selected {
color: #f05423;
}
.btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active {
border-color: #b6b6b6;
background-color: #fff;
}
.btn-select.btn-default ul li.selected {
background-color: #fff;
}
.btn-select.btn-default ul, .btn-select.btn-default .btn-select-value {
background-color: transparent;
border: #b6b6b6 1px solid;
border-top: 0px;
}
.btn-default {
color: #4f5858;
background-color: #fff;
border-color: #e9e9e9;
font-size: 13px;
font-weight: normal;
}
.btn.active, .btn:active {
-webkit-box-shadow: none;
box-shadow: inone;
}
.btn-default span {
color: #4f5858;
}
.btn-select.btn-default ul li.selected span {
color: #4f5858;
}
textarea.form-control {
height: 100px;
}
.dropinput {
color: #000;
background-color: #ebebeb;
border: none;
padding: 2px 5px;
margin-left: 10px;
width: 170px;
font-size: 12px;
}
.oth {
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<a class="btn btn-default btn-select">
<input class="btn-select-input" type="hidden">
<span class="btn-select-value">Purpose of Enquiry</span>
<span class="btn-select-arrow glyphicon glyphicon-triangle-bottom"></span>
<ul style="display: none;">
<li>Media & Publications</li>
<li>New Business Collaborations<input maxlength="30" class="dropinput" type="text" placeholder="Please specify project location"></li>
<li>Others<input maxlength="58" class="dropinput oth" type="text" placeholder="Please specify"></li>
</ul>
</a>
</div>
tq
There you go:
function init(){
$(document).on('click', '.btn-select', function (e) {
if(document.activeElement==$(this).find('.btn-select-value input')[0]) // prevent opening when textfield is focused
return
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
selectLine(this,$(e.target))
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$('.dropinput').blur(function(e) {
if(e.currentTarget.value.length==0) // if nothing has been entered, skip
return
var dropdown = $(e.currentTarget).parent().parent().parent();
var ul = dropdown.children('ul')
selectLine(dropdown[0],$(e.currentTarget).parent())
ul.hide();
dropdown.removeClass("active");
});
$('.dropinput').click(function(e) {
e.stopPropagation();
});
}
function selectLine(dropdown,target){
var input_text = target.find('input').val() // take input value from input in list
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(dropdown).find(".btn-select-input").val(value);
$(dropdown).find(".btn-select-value").html(value);
$(dropdown).find(".btn-select-value input").val(input_text); // put input value into input in selected input
}
$(document).ready(init)
It's quite the spaghetti code, but it works. It's always smart to wrap your code into an init function which will get called once your document is ready.
I would like to make it so that when a div with the class "dropdown" is hovered over, a certain piece of text with the id "workButton" would underline. I would like to do this using jQuery, unless it is possible to make it happen in CSS. I currently have it so that when the text is hovered over it underlines and turns white, but I would like the same to happen when "dropdown" is hovered over. (the text with the id "workbutton" also has the class "menuContent")
CSS:
.menuContent:hover {
text-decoration: underline;
cursor: pointer;
color: #ffffff;
}
.menuContent {
font-family: "cicle-gordita";
text-align: center;
padding: 0px;
margin: 0px;
margin-top: 10px;
color: #b4b0b0;
text-decoration: none;
font-size: 40px;
}
.dropdown {
margin-top: 50px;
height: 50px;
width: 100%;
background: #ffffff;
position: fixed;
display: none;
}
.dropdown-menuBit {
height: 40px;
margin: 0px;
padding: 0px;
float: left;
margin-left: 20px;
}
.dropdown-menuContent {
font-family: "cicle-gordita";
text-align: center;
padding: 0px;
margin: 0px;
color: #b4b0b0;
text-decoration: none;
font-size: 30px;
padding-top: 5px;
}
.dropdown-menuContent:hover {
text-decoration: underline;
cursor: pointer;
color: #ffffff;
}
JQuery:
var main = function() {
$('.dropdown').hide(function() {
$('.main').animate({
top: "-50px"
}, 0);
});
$('#workButton').hover(function() {
$('.dropdown').fadeIn(1)
$('.main').animate({
top: "0px"
}, 100)
});
$('.main, #blogButton, #homeButton, .logo').hover(function() {
$('.dropdown').fadeOut(200)
$('.main').animate({
top: "-50px"
}, 200)
});
Just place the :hover on the parent and it should work just fine:
.dropdown:hover #workButton
I am working on my website, and I have come to an impasse: the links which I have created in my navigation bar do not redirect the user to another page on my site.
As can be seen here, I am using a simple navigation bar with a technique I found at gmarwaha.com. I tried to follow the instructions as best I could, but it seems I have missed a step - unfortunately I cannot figure out what that step is!
The CSS is a little different than what is on the site, but it still came from there, anyhow. It can be seen below:
.lavaLampBottomStyle {
position: relative;
height: 29px;
width: 342px;
background-color: white;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
margin-left: auto;
margin-right: auto; }
.lavaLampBottomStyle li {
float: left;
list-style: none;
}
.lavaLampBottomStyle li.back {
border-bottom: 5px solid blue;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampBottomStyle li a {
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border: none;
}
The JavaScript placed in the head of my document is also very important:
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
If anyone would be able to aid me in finding this error, I would be very grateful.
From the example code it's hard to tell but returning false from a click will prevent the action.