So, I found this amazing plugin called Unslider, but it seems to dissapear on jquery mobile. I'm trying to implement the basic example. Here's my code:
html:
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/vendor/jquery-1.9.0.min.js"></script>
<script src="js/vendor/jquery.mobile-1.4.2.min.js"></script>
<script src="js/vendor/unslider.min.js"></script>
<script src="js/vendor/jquery.event.swipe.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div data-role="page" id="firstPage">
<div data-role="main" class="ui-content">
<div class="banner">
<ul>
<li>This is a slide.</li>
<li>This is another slide.</li>
<li>This is a final slide.</li>
</ul>
</div>
</div>
</div>
</body>
main.css:
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }
main.js:
$(document).on("ready", function () {
$('.banner').unslider();
});
But nothing displays (when combined with other jquery mobile pages). When I use only one page, the unslider is shown as a normal list.
How can I make this work?
Issue is that you called unslider on the wrong/undefined DOM element
There is no DOM element with class='initInstructionsSlider' in your HTML
Insted of
$('.initInstructionsSlider').unslider();
write
$('.banner').unslider();
JSFiddle
Ok, I kept trying this until I got it working.
First, I had to add the call into the pageshow event:
$(document).delegate("#firstPage", "pageshow", function () {
$('.banner').unslider();
});
Then, I had to add some extra css for the li elements appear:
.banner {
position: relative;
overflow: auto;
margin: 0;
padding: 0;
}
.banner ul {
list-style: none;
width: 300%;
}
.banner li {
list-style: none;
}
.banner ul li {
display: block;
float: left;
min-height: 350px;
padding: 4em 0 4px;
width: 33%;
}
I think min-height alone does the trick, but I added some more css to style it.
Also, I added the following to make the dots appear:
.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #fff;
opacity: 1;
}
Related
I created a dropdown button with tag and a "down-caret" icon. when dropdown menu is open, "down-caret" icon should rotate up and this is working.
But if I click on button title or "down-caret" icon, this event not work.
$(document).ready(function() {
$('.dropdown').click(function(e) {
$($(e.target).find('.down-caret').toggleClass('open-caret'));
e.stopPropagation();
$(document).click(function() {
$('.dropdown-menu').removeClass('open');
$('.down-caret').removeClass('open-caret');
});
});
});
a {
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .drop {
background-color: #3498db;
color: #fff;
padding: 1rem;
border-radius: 6px;
position: relative;
display: inline-block;
}
.down-caret {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #ffffff transparent transparent transparent;
display: inline-block;
margin-left: 6px;
top: -3px;
position: relative;
transform: rotate(0deg);
transition: all 0.25s ease-in;
}
.open-caret {
transform: rotate(180deg);
transition: all 0.25s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
<a class="drop" href="#">
<span>Dropdown</span>
<i class="down-caret"></i>
</a>
</li>
I need span & i tags to be exist in my code.
here is my complete code jsFiddle
Just need to target the anchor element and change your JS slightly.
$(document).ready(function(){
$('a.drop').click(function(e){
e.preventDefault();
$('.down-caret',this).toggleClass('open-caret');
e.stopPropagation();
$(document).click(function(){
$('.dropdown-menu').removeClass('open');
$('.down-caret').removeClass('open-caret');
});
});
});
a {
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .drop {
background-color: #3498db;
color: #fff;
padding: 1rem;
border-radius: 6px;
position: relative;
display: inline-block;
}
.down-caret {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #ffffff transparent transparent transparent;
display: inline-block;
margin-left: 6px;
top: -3px;
position: relative;
transform: rotate(0deg);
transition: all 0.25s ease-in;
}
.open-caret {
transform: rotate(180deg);
transition: all 0.25s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
<a class="drop" href="#">
<span>Dropdown</span>
<i class="down-caret"></i>
</a>
</li>
The reason is, you are using currently clicked element $(e.target) to find an element inside with class down-caret.
And if you click on icon or the text there is no element inside with that specified class.
You just need to change $(e.target) to $('.dropdown') and you are done.
$(document).ready(function(){
$('.dropdown').click(function(e){
$('.dropdown').find('.down-caret').toggleClass('open-caret');
});
});
a {
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .drop {
background-color: #3498db;
color: #fff;
padding: 1rem;
border-radius: 6px;
position: relative;
display: inline-block;
}
.down-caret {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #ffffff transparent transparent transparent;
display: inline-block;
margin-left: 6px;
top: -3px;
position: relative;
transform: rotate(0deg);
transition: all 0.25s ease-in;
}
.open-caret {
transform: rotate(180deg);
transition: all 0.25s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="dropdown">
<a class="drop" href="#">
<span>Dropdown</span>
<i class="down-caret"></i>
</a>
</li>
Here is the fiddle
All you have to do is add this class in your CSS and the code will work as you want it to:
.drop{
position:relative;
z-index: -1;
}
Here is the fiddle supporting it.
Hope this was helpful.
Instead of using target to find the "down-caret" icon, why don't just take straight "down-icon"?
Change $(e.target).find('.down-caret') to $('.down-caret')
I checked your fiddle code, and i just removed <span> and its working fine. I also updated your fiddle JSFiddle
I am trying to do css based hovering for background and picture to show up on hovering over a button/link inside the main div only.
The problem is that the background color is showing up all over the page and not limited to just that div block where I am trying to all these things.
here is the code:
<div class="suction">
<ul class="menu">
<div class="block">
<li>h</li>
<li>g</li>
<li>i</li>
<li class="bg"></li>
</div>
<div class="block">
<li>p</li>
<li>l</li>
<li>m</li>
<li class="bg"></li>
</div>
</ul>
Here is the css:
* {
margin: 0;
padding: 0;
}
body {
background: #e5e5e5;
}
suction {
margin:0 auto;
max-width:100%;
height: 400px;
}
.block {
width: 20%;
padding: 25px 0;
display: inline-block;
margin: 10px;
}
.bg {
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: .25s;
pointer-events: none;
}
li {
list-style: none;
}
li a {
display: block;
float: ;
width: 20%;
padding: 25px 0;
text-align: center;
font-family: 'HeydingsCommonIconsRegular', Helvetida Neue, sans-serif;
font-weight: 700;
letter-spacing: 1px;
font-size: 40px;
color: #fff;
background: #ccc;
text-decoration: none;
text-transform: uppercase;
text-shadow: 2px 2px 0 rgba(0, 0, 0, .25);
transition: .25s;
}
li a:hover {
margin: -10px 0 0 0;
}
.ajabmenu {
margin: 60px auto 0 auto;
border-radius: 10px;
overflow: hidden;
display: block
}
.ajabmenuu li:first-child a {
background: #ffca6d !important;
}
.ajabmenu li:nth-child(2) a {
background: #ff6d6d !important;
}
.ajabmenu li:nth-child(3) a {
background: #6dffb9 !important;
}
.ajabmenu li:nth-child(4) a {
background: #6dcaff !important;
}
.ajabmenu li:nth-child(5) a {
background: #ec6dff !important;
}
.ajabmenu li:first-child:hover ~ .bg {
background: #ffca6d url("https://www.drupal.org/files/images/druplicon-polska-small.png") no-repeat center top fixed;
}
.ajabmenu li:nth-child(2):hover ~ .bg {
background: #ff6d6d;
}
.ajabmenu li:nth-child(3):hover ~ .bg {
background: #6dffb9;
}
.ajabmenu li:nth-child(4):hover ~ .bg {
background: #6dcaff;
}
.ajabmenu li:nth-child(5):hover ~ .bg {
background: #ec6dff;
}
Codepen link
Everything should be under 'suction' block and never goes out. I tried removing that Fixed from .bg but it doesnt work.
Please let me know if there is any good method or easy way to do it.
Ok, first solution didn't work. Try this:
You absolutely need to lose the background color on your 'suction' class, but this codepen works.
Codepen
What I did was basically place the dot (.) before your 'suction' class, since it wasn't doing anything, change the background to transparent, and change the fixed position on your .bg class to absolute, and a width / height of 100%.
Here are the classes that matter:
.suction {
width: 50%;
background: transparent;
margin: 10px auto;
position: relative;
text-align:center;
}
.bg {
z-index: -1;
position: absolute;
top: 0;
left: 0;
transition: .25s;
pointer-events: none;
width: 100%;
height: 100%;
}
I have been trying to get unslider to work. I have cheeked the Jquery and it says it has no errors. I dont think its the typos, but im pretty sure i missed something. here's my coding. hers a link to unslider unslider.com/
HTML
<!DOCTYPE html>
<html>
<head>
<title>unslider
<link rel="stylesheet" type="text/css" href="unslider.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<script scr="unslider.js"></script>
</title>
</head>
<body>
<div class="banner">
<ul>
<li>This is a slide.</li>
<li>This is another slide.</li>
<li>This is a final slide.</li>
</ul>
</div>
</body>
</html>
CSS
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; color: red; }
.banner ul li { float: left; }
Javascript
$(function() {
$('.banner').unslider();
});
Hi be sure that u put javascript in <head> section, head must be like this:
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
var unslider = $('.banner').unslider();
$('.prev').click(function() {
unslider.data('unslider').prev();
});
$('.next').click(function() {
unslider.data('unslider').next();
});
return false;
});
</script>
</head>
If u still have problems copy/paste this code to the .html file
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
var unslider = $('.banner').unslider();
$('.prev').click(function() {
unslider.data('unslider').prev();
});
$('.next').click(function() {
unslider.data('unslider').next();
});
return false;
});
</script>
<!-- CSS -->
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
.banner {
position: relative;
width: 100%;
overflow: auto;
top: 50px;
/*z-index: -1;*/
font-size: 18px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul {
list-style: none;
width: 300%;
}
.banner ul li {
display: block;
float: left;
min-height: 500px;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}
.banner .inner {
padding: 360px 0 110px;
float: left;
vertical-align:-100px;
}
.banner h1, .banner h2 {
font-size: 40px;
line-height: 52px;
color: #fff;
}
.banner .btn {
display: inline-block;
margin: 25px 0 0;
padding: 9px 22px 7px;
clear: both;
color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border : rgba(255, 255, 255, 0.4) solid 2px;
border-radius: 5px;
}
.banner .btn:hover {
background : rgba(255, 255, 255, 0.05);
}
.banner .btn:active {
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
}
.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #fff;
opacity: 1;
}
.unslider-arrow {
font-family: Expressway;
font-size: 50px;
text-decoration: none;
color: #3d3d3d;
background: rgba(255,255,255,0.7);
padding: 0 20px 5px 20px;
}
.next {
position: absolute;
top: 65%;
right: 0
}
.prev {
position: absolute;
top: 65%;
right: 90 /* change to left:0; if u wanna have arrow on left side */
}
</style>
</head>
<!-- Body of HTML document -->
<body>
<div class="slider">
<div class="banner">
<ul>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
</ul>
</div>
←
→
</div>
</body>
</html>
I'm using the Unslider image slider on a SharePoint site, and I'm having issues with the dots and arrows. At this point, I'm seeing small squares that are acting as "dots" and two text arrows that appear on top of each other (but are acting as arrows should).
I really need to place the text arrows with arrow images that appear next to each other and function as the arrows do now. (Changing the squares to dots would be helpful as well, but not a requirement.
Can someone help? This isn't my area of expertise and I'm having issues. The following is the CSS I am using:
dots {
}
.dots LI {
BORDER-BOTTOM: #101 2px solid; BORDER-LEFT: #101 2px solid; TEXT-INDENT: -999em; MARGIN: 0px 4px; WIDTH: 10px; DISPLAY: inline; HEIGHT: 100px; BORDER-TOP: #101 2px solid; CURSOR: pointer; BORDER-RIGHT: #101 2px solid; opacity: .4; border-radius: 100%; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s
}
.dots LI.active {
BACKGROUND: #101; opacity: 1
}
.arrows {
POSITION: absolute; TEXT-ALIGN: right; BOTTOM: 16px; DISPLAY: inline; HEIGHT: 50px; FONT-SIZE: 11pt; RIGHT: 300px; FONT-WEIGHT: bold; LEFT: 10px
}
A IMG {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
Thanks so much!!
Hi try Css included in this file
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com arrow example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
var unslider = $('.banner').unslider();
$('.prev').click(function() {
unslider.data('unslider').prev();
});
$('.next').click(function() {
unslider.data('unslider').next();
});
return false;
});
</script>
<!-- CSS -->
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
.banner {
position: relative;
width: 100%;
overflow: auto;
top: 50px;
/*z-index: -1;*/
font-size: 18px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul {
list-style: none;
width: 300%;
}
.banner ul li {
display: block;
float: left;
min-height: 500px;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}
.banner .inner {
padding: 360px 0 110px;
float: left;
vertical-align:-100px;
}
.banner h1, .banner h2 {
font-size: 40px;
line-height: 52px;
color: #fff;
}
.banner .btn {
display: inline-block;
margin: 25px 0 0;
padding: 9px 22px 7px;
clear: both;
color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border : rgba(255, 255, 255, 0.4) solid 2px;
border-radius: 5px;
}
.banner .btn:hover {
background : rgba(255, 255, 255, 0.05);
}
.banner .btn:active {
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
}
.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #fff;
opacity: 1;
}
.unslider-arrow {
font-family: Expressway;
font-size: 50px;
text-decoration: none;
color: #3d3d3d;
background: rgba(255,255,255,0.7);
padding: 0 20px 5px 20px;
}
.next {
position: absolute;
top: 65%;
right: 0
}
.prev {
position: absolute;
top: 65%;
right: 90 /* change to left:0; if u wanna have arrow on left side */
}
</style>
</head>
<!-- Body of HTML document -->
<body>
<div class="slider">
<div class="banner">
<ul>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
</ul>
</div>
←
→
</div>
</body>
</html>
how could I make my menu drop down when i click on it instead of hover?
I want to be able to click on .logo and have the ul dropdown. and to also hide the menu when i click on it again. The div inside .logo is just a triangle pointing down.
html code:
<div id='Logo_dropdown'>
<ul>
<li class='logo'><a href='#'><div></div></a></li>
<ul>
<li><a href='#upload'><span>Upload Logo</span></a></li>
<li><a href='#Edit'><span>Edit Logo</span></a></li>
</ul>
</div>
CSS code:
#Logo_dropdown ul {
padding: 0;
margin-left:auto;
margin-right:auto;
position:absolute;
top: 50%;
margin-top: -30px;
font-size:14px;}
#Logo_dropdown li {
margin: 0;
padding: 0;}
#Logo_dropdown a {
margin: 0;
padding: 0;
}
#Logo_dropdown ul {
list-style: none;
}
#Logo_dropdown a {
text-decoration: none;
}
#Logo_dropdown {
height: 50px;
position:absolute ;
background: #FCFCFC;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
left:200px;
opacity:0.9;
filter:alpha(opacity=90);
padding-left:1%;
padding-right:auto;
width: 190px;
/* background-color:#F3F3F3 ; /*color for Nav Menu Bar
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);*/
width: 140px;
z-index:1;
}
#Logo_dropdown > ul > li {
float: left;
position: relative;
left:140px;}
#Logo_dropdown > ul > li > a {
color: #999;
font-family: Verdana, 'Lucida Grande';
font-size: 12px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#Logo_dropdown > ul > li > a:hover {
color:#2bafb8; /*color nav menu bar when mouse hovers*/
}
#Logo_dropdown > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 80%;
margin-left: -90px;
width: 250px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
width:100px;
}
#Logo_dropdown > ul > li:hover > ul {
opacity: 1;
top: 95px; /*position of hover li*/
z-index:1;
overflow: visible;
}
#Logo_dropdown > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#Logo_dropdown > ul ul > li {
position: relative;
overflow: visible;
}
#Logo_dropdown ul ul a {
color: #2bafb8;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#Logo_dropdown ul ul a:hover {
background-color: #f0f0f0;
}
#Logo_dropdown ul ul a:hover {
background-color: #2bafb8;
color: #f0f0f0 !important;
}
div{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #CCC;
}
You can use simply toggle() to view the dropdown :)
I want to be able to click on .logo and have the ul dropdown
Use this :
$('.logo').click(function () {
$('#logodropdown ul.second').toggle();
}
This way, it will show it if hidden, and hide it if visible. You can also set some speed if you want, inside the parathesis as toggle(time in milliseconds).
And please change the second ul to <ul class="second"> as the code might misunderstand your approach and hide both of the lists in the #logodropdown. This would be a good approach to what you want to happen! Or even use a class to differentiate between both the lists.
You can use CSS to do some stuff like :active or :focus. But they won't cause a change in the properties of other elements. That's where you need a help of jQuery. :)
For click you will need to use Javascript, as there is no click event handling in CSS.