I'm a beginner of coding and this is the first post for me.
I could make link buttons I liked except for one thing, which is I needed to keep pushing a mouse down to get the desired effect. I mean, if I unclick it, the effects all come back and that's not what I want. I want to stop the effect and jump to a linked site. I want the effect occurred by click to be finished and stabilized.
I though the easy way to fix it was to add a .active class using JQuery, however, pseudo elements cannot be selected by JQuery and seems really complicated for me.
I want only "ul li:before, ul li:after, ul li .fa" to have .active, I don't want other elements such as "ul li .fa" to have .active.
I'm sorry for my bad explanation.
However, I'd appreciate if you could help me, desirably, showing me the completed result.
#charset "utf-8";
body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
ul li { /*black border*/
list-style: none;
position: relative;
width: 120px;
height: 120px;
background: #fff;
margin: 0 20px;
border: 2px solid #262626;
box-sizing: border-box;
border-radius: 50%;
transition: .5s;
}
ul li .fa { /*arrengement of icons*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
font-size: 48px;
color: #262626;
}
ul li:hover .fa { /*make icons white when hovered*/
color: #fff;
transition: .5s;
}
ul li:before { /*pink circles invisible due to opacity:0*/
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #e91e63;
border-radius: 50%;
transform: scale(1);
opacity: 0;
}
ul li:hover:before { /*show pink circles when hovered*/
opacity: 1;
transform: scale(.8);
transition: .5s;
}
ul li:after { /*dotted borders invisible due to opacity:0*/
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
border-radius: 50%;
transform: scale(0);
opacity: 0;
/* border: 2px dashed #262626; */
box-sizing: border-box;
border-top: 2px dashed #262626;
border-right: 2px dashed #262626;
border-left: 2px dashed #262626;
border-bottom: 2px dashed #262626;
}
ul li:hover:after { /*display and rotate dotted borderes when hovered*/
opacity: 1;
animation: rotateborder 10s linear infinite;
}
#keyframes rotateborder {
0% {
transform: scale(0.92) rotate(0deg);
}
100% {
transform: scale(0.92) rotate(360deg);
}
}
ul li:active:before, ul li:active .fa { /*sublimate pink circles and icons when clicked*/
transform: scale(20);
opacity: 0;
transition: 0.2s;
}
ul li:active:after { /*dipslay and rotate dotted borders when clicked*/
opacity: 1;
animation: spin 1s linear ;
border-bottom: none;
border-right: none;
border-left: none;
}
#keyframes spin {
0% {
transform: scale(0.92) rotate(0deg);
}
100% {
transform: scale(0) rotate(1500deg);
}
}
main { /*overflow:hidden so that icons don't disturb the size of the window because of its expansion when clicked*/
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<main>
<ul>
<li><i class="fa fa-gift" aria-hidden="true"></i></li>
<li><i class="fa fa-glass" aria-hidden="true"></i></li>
<li><i class="fa fa-globe" aria-hidden="true"></i></li>
<li><i class="fa fa-graduation-cap" aria-hidden="true"></i></li>
<li><i class="fa fa-heart" aria-hidden="true"></i></li>
</ul>
</main>
<footer>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- <script>
$("li").click(function() {
$(this).addClass("active");
});
</script> -->
</body>
</html>
I'm not sure I get your problem or where you're heading to.
You can't add class to a pseudo element (because, well it's not a real element hence the "pseudo"), but you can style pseudo element with a class with CSS.
ul li.active::before,
ul li.active::after{
/* Your style */
}
So I guess, your final style of animation should be "stabilized" in CSS with a dedicated class.
If the active class is used for something else, then use a dedicated class for your pseudo element (.active-pseudo or whatever seems right to you)
If you absolutely need class for your pseudo elements, then use real elements (span etc.) and forget ::before and ::after. :)
Related
I have this code (you need to open up full page to see the top of the card):
<script>
function myFunction() {
//put the url of the girl into the quotes of imgUrl
var imgUrl = "https://i.mdel.net/oftheminute/images/2019/07/Jill-06.jpg"
//put the name of the model into the quotes of modelName
var modelName = "My Model"
//put the link to their instagram into the quotes of instagram
var instagram = "https://www.instagram.com/instagram"
//put the link to their twitter into the quotes of twitter
var twitter = "https://twitter.com/twitter"
document.getElementById("myText").innerHTML = modelName;
document.getElementById("myImg").src = imgUrl;
document.getElementById("instagram").href = instagram;
document.getElementById("twitter").href = instagram;
}
</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body onload="myFunction()">
<div class="image-area">
<div class="img-wrapper">
<img src="" id="myImg" alt="">
<h2 id="myText"></h2>
<ul>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-twitter"></i></li>
</ul>
</div>
</div>
</body>
</html>
<style>
*
{
background: #f1f2f6;
margin: 0;
padding: 0;
}
.image-area
{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.img-wrapper
{
width: 300px;
height: 400px;
position: relative;
overflow: hidden;
}
.img-wrapper:before
{
content: '';
position: absolute;
top: 0;
left: 180%;
height: 100%;
width: 100%;
background: rgba(255,255,255,.3);
z-index: 1;
transform: skew(45deg);
transition: .5s;
}
.img-wrapper:hover:before
{
left: -180%;
}
.img-wrapper img
{
height: 400px;
width: 300px;
filter: grayscale(100%);
transition: 2s;
}
.img-wrapper:hover img
{
filter: grayscale(0%);
transform: scale(1.1);
}
.img-wrapper h2
{
background: tomato;
font-family: Poppins;
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
transform: perspective(400px) rotateY(90deg);
transform-origin: right;
transition: 1s;
}
.img-wrapper:hover h2
{
transform: perspective(400px) rotateY(0deg);
}
.img-wrapper ul
{
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style: none;
background: rgba(255,255,255,0);
}
.img-wrapper ul li
{
background: #333;
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
transform: perspective(800px) rotateY(90deg);
transition: .5s;
transform-origin: left;
}
.img-wrapper:hover ul li
{
transform: perspective(800px) rotateY(0deg);
}
.img-wrapper:hover ul li:nth-child(1)
{
transition-delay: .2s;
}
.img-wrapper:hover ul li:nth-child(2)
{
transition-delay: .6s;
}
.img-wrapper:hover ul li:nth-child(3)
{
transition-delay: .8s;
}
.img-wrapper:hover ul li:nth-child(4)
{
transition-delay: 1s;
}
.img-wrapper ul li a
{
color: tomato;
background: rgba(255,255,255,0);
}
.img-wrapper ul li i
{
color: tomato;
background: rgba(255,255,255,0);
}
.img-wrapper ul li i:hover
{
color: #fff;
background: rgba(255,255,255,0);
}
</style>
the only problem with this is, when you try to click the instagram or twitter logo, it doesn't redirect to ig or twitter at all, and I dont know why! How do I fix this? I basically put the variable instagram into the id of the <a> tag, but leave the href empty. That is because I thought the variable in the id would act as the href based on my variable and how I am writing to the html. I am probably wrong tho!
When looking at the javascript console logs you can see the error:
Refused to display 'https://www.instagram.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
This means instagram and twitter set a header that forbids you to display the pages on a frame. You'll need to do a full page redirect instead.
UPDATE:
The frame thing was just inside SO. Outside SO the links worked for me. Either way I suggest you don't use javascript for that at all. Just se the href directly on html and you'll have an easier time. e.g.
<a href="https://www.instagram.com/instagram" target="_blank">
<i class="fab fa-instagram"></i>
</a>
I put a down-directed arrow icons on the bottom of the first view of my website. I set the css for the icons like below. However I scroll down the page, they follow. I just want leave them on the first view. Does anyone have any tips to fix that?
function scrollDown() {
var businessPage = document.getElementById("businessPage");
businessPage.scrollIntoView();
}
.box {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span {
display: block;
width: 20px;
height: 20px;
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}
.box span:nth-child(1) {
opacity: 0.3
}
.box span:nth-child(2) {
opacity: 0.5;
}
<body>
<div class="box">
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
</div>
</body>
I want my i elements to lose the outline class on hover, but for some reason this is not working. The class is lost and added again instantly without a fade/delay. If I try this exact same code with a class of background then it does work. What am I not seeing here?
The second problem is that when I do try this with a background class, the background stays there for the duration of the fade (in this case 500ms) and then disappears instantly. This should also be a fade, like a fade out.
Thank you!
JSFiddle
$('nav a').hover(function(){
if (!$(this).find("i").hasClass("home")){
$(this).find('i').toggleClass('outline', 500);
}
})
.hover() can be passed 2 functions as arguments. The first is like .mouseover() and the second is the .mouseout()
$('nav a').hover(function() {
$(this).find('.home').removeClass('outline');
}, function() {
$('.home').addClass('outline');
})
Update
You can add fadein and fadeout effect without Javascript, only with css:
nav {
font-size: 20 px;
}
nav a {
padding-left: 30 px;
}
nav a i {
position: absolute;
left: 0;
}
nav a i.star: not(.outline) {
opacity: 0;
transition: opacity 300 ms ease;
}
nav a: hover.star: not(.outline) {
opacity: 1;
transition: opacity 300 ms ease;
}
Demo here.
With the help of [Radonirina Maminiaina][1]'s answer and some altering of the code by myself I made it work exactly as intended.
It was Radonirina's idea to put the second icon right behind the original icon by using position: absolute; (see his code above), but then I came up with the idea to add the class "dark" to the hidden icon underneath and simply select it to make the opacity 0, and 1 on hover, including the transition effect. This made the CSS a lot simpler and it works beautifully.
Thanks again!
Here is a working example of the end result:
$('.menu-toggle').click(function() {
$('nav').toggleClass('nav-open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
/* Navigation bar */
header {
position: fixed;
height: 50px;
width: 100%;
background: #666666;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav a {
color: #222;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
font-size: 1rem;
font-family: Fjalla One;
}
.smallNav {
position: absolute;
top: 100%;
right: 0;
background: #CCCCCC;
height: 0px;
overflow: hidden;
}
.nav-open {
height: auto;
}
.smallNav a {
color: #444;
display: block;
padding: 1.5em 4em 1.5em 3em;
border-bottom: 1px solid #BCBCBC;
}
.smallNav a:last-child {
border-bottom: none;
}
.smallNav a:hover,
.smallNav a:focus {
color: #222;
background: #BABABA;
}
/* Menu toggle */
.menu-toggle {
padding: 1em;
position: absolute;
right: 1em;
top: 0.75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: white;
height: 3px;
width: 1.5em;
border-radius: 3px;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
.menu-toggle:hover {
transform: scale(1.1);
}
i.icon {
margin-right: 0.5em !important;
font-size: 1.2em !important;
}
/* Change icons on hover */
nav a i.dark {
position: absolute;
left: 42px;
}
nav a i.dark {
opacity: 0;
transition: opacity .25s ease;
}
nav a:hover i.dark {
opacity: 1;
transition: opacity .25s ease;
}
nav a:hover i.outline {
opacity: 0;
transition: opacity .25s ease;
}
<!DOCTYPE html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<header>
<div class="header-container">
<nav class="smallNav">
<ul>
<li><i class="icon home"></i>Home</li>
<li><i class="icon star outline"></i><i class="icon star dark"></i>Featured</li>
<li><i class="icon newspaper outline"></i><i class="icon newspaper dark"></i>News</li>
<li><i class="icon user outline"></i><i class="icon user dark"></i>Career</li>
<li><i class="icon envelope outline"></i><i class="icon envelope dark"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger">
</div>
</div>
</div>
</header>
I need to create an animation which will make a menu appear from the left side of the screen. This animation should be started on a click on a button.
The content of the menu should recover 55% of the width of the main page.
JSFiddle Demo
In the previous link you can the the menu and the button to move left. At the beginning the menu (with the "link" elements) should be hidden and the button .glyhicon should be at the very left of the page.
On click on this button the menu and the button should move to the right and recover 55% of the main page.
The problem is I don't know how to do this. (I managed to move the menu by changing the structure but I couldn't move the button.)
Here is my HTML code
<div id="left-menu">
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
<div id="icon-menu" class="test">
<button id="button_menu" class="js-menu menu" type="button">
<span class="glyphicon glyphicon-map-marker"></span>
</button>
</div>
</div>
CSS :
#left-menu {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#map-menu, #icon-menu {
display: inline-block;
vertical-align: middle;
}
.menu {
background: 0;
float: left;
margin: 2rem;
height: 2.7rem;
width: 3.5rem;
z-index: 2;
outline: 0;
padding: 0;
border: 0;
}
.menu_content{
width: 60%;
height: 100%;
background: #eaeaea;
position: fixed;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91), -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
padding-top: 6.2rem;
z-index: 1;
}
.menu-open nav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
javascript :
var isActive = false;
$('.js-menu').on('click', function() {
if (isActive) {
$(this).removeClass('active');
$('#left_menu').removeClass('menu-open');
/*$('#button_menu').removeClass('move-right');
$('#button_menu').addClass('move-left');*/
} else {
$(this).addClass('active');
$('#left_menu').addClass('menu-open');
/*$('#button_menu').removeClass('move-left');
$('#button_menu').addClass('move-right');*/
}
isActive = !isActive;
});
Could you help me to adapt or redo the animation please ?
Here's a pure CSS solution without any javascript by making use of the :checked status of a hidden checkbox with display:none, the label for that checkbox should be outside the #left-menu element so it is possible to target it using ~:
JS Fiddle 1
#button_menu {
display: none;
}
.glyphicon {
width: 40px;
height: 40px;
display: inline-block;
background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
background-size: 100%;
position: fixed;
left: 5px;
top: 50%;
transition: all 1s;
cursor: pointer;
}
#left-menu {
background-color: orange;
position: fixed;
left: -100%;
width: 55%;
top: 50%;
transition: all 1s;
}
#button_menu:checked + .glyphicon {
left: 55%;
transition: all 1s;
}
#button_menu:checked ~ #left-menu {
left: 0;
transition: all 1s;
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
<input type="checkbox" id="button_menu" class="js-menu">
<label for="button_menu" class="glyphicon"></label>
<div id="left-menu">
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
and here's a simple jQuery solution, where basically we have a variable as a triggering flag toggleFlag, if its value is true the left value is 0, while if the triggering flag value is false then the left value is -55% -which is the menu width as the op said it takes 55% of the screen-, then we animate the .left-menu dependign on the left value, and we need to negate the value of the triggering flag.
JS Fiddle 2
var menuIcon = $('.glyphicon'),
leftMenu = $('#left-menu'),
toggleFlag = true;
menuIcon.on('click', function() {
var leftVal = (toggleFlag) ? '0' : '-55%';
$('#left-menu').animate({'left': leftVal }, 700);
toggleFlag = !toggleFlag;
});
.glyphicon {
width: 40px;
height: 40px;
display: inline-block;
background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
background-size: 100%;
position: absolute;
right: -45px;
top: 5px;
cursor: pointer;
}
#left-menu {
background-color: orange;
position: fixed;
left: -55%;
width: 55%;
top: 50%;
}
.slideIt {
color: red;
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="left-menu">
<span class="glyphicon"></span>
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
There a couple things with your example and fiddle, to start it helps to have jquery loaded in the fiddle to mess around.
Next isActive is not only not defined but unnecessary
if (isActive) {
should be replaced by
if ($(this).hasClass('active')) {
and
isActive = !isActive;
can be removed completely
next you becareful with your underscores and hyphens
$('#left-menu') != $('#left_menu')
Please also wrap it all in a document ready so it can be attached when the page loads
$(document).ready(function () {
// code
});
so with the fixes you can have something like:
$(document).ready(function () {
$('.js-menu').on('click', function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('#left-menu').removeClass('menu-open');
} else {
$(this).addClass('active');
$('#left-menu').addClass('menu-open');
}
});
});
Now to move your button, the problem is you're adding the transform to the <nav> in the menu-open class with :
.menu-open nav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
So one way to fix that would be to also add it to your button
.menu-open #icon-menu {
-webkit-transform: translateX(55%);
transform: translateX(55%);
}
OR
.menu-open .active {
-webkit-transform: translateX(55%);
transform: translateX(55%);
}
I'll leave you to do the slide animation and so on.
There's a couple ways to make it better than this but with what you have for now this'll probably help you get a start on it? Maybe?
I am new to jQuery and Visual Studio Environment. I was working on creating a circular navigation menu bar using the guide at this link
The main problem is in the head section where I have mentioned all the jQuery and jQueryUI scripts. This is a screenshot of the errors. All the other stackoverflow questions couldn't solve this problem.
The code is as below. Please help!
Thanks in advance.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.11.2.js"></script>
<link rel="stylesheet"
href="code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="~/Scripts/modernizr-2.6.2.min.js"></script>
<script src="~/Scripts/polyfills.js"></script>
<script src="~/Scripts/classie.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.cn-button {
border:none;
background:none;
color: white;
text-align: Center;
font-size: 1.5em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #111;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus{
background-color: #222;
}
</style>
<style>
.csstransforms .cn-wrapper {
font-size:1em;
width: 26em;
height: 26em;
overflow: hidden;
position: fixed;
z-index: 10;
bottom: -13em;
left: 50%;
border-radius: 50%;
margin-left: -13em;
transform: scale(0.1);
transition: all .3s ease;
}
/* class applied to the container via JavaScript that will scale the
navigation up */
.csstransforms .opened-nav {
border-radius: 50%;
transform: scale(1);
}
</style>
<style>
.cn-overlay{
width:100%
height:100%;
background-color: rgba(0,0,0,0.6);
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
opacity:0;
transition: all .3s ease;
z-index:2;
pointer-events:none;
}
/* Class added to the overlay via JavaScript to show it when navigation
is open */
.cn-overlay.on-overlay{
pointer-events:auto;
opacity:1;
}
</style>
<style>
.csstransforms .cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
transform-origin: 100% 100%;
overflow: hidden;
left: 50%;
top: 50%;
margin-top: -1.3em;
margin-left: -10em;
transition: border .3s ease;
}
.csstransforms .cn-wrapper li a {
display: block;
font-size: 1.18em;
height: 14.5em;
width: 14.5em;
position: absolute;
bottom: -7.25em;
right: -7.25em;
border-radius: 50%;
text-decoration: none;
color: #fff;
padding-top: 1.8em;
text-align: center;
transform: skew(-50deg) rotate(-70deg) scale(1);
transition: opacity 0.3s, color 0.3s;
}
.csstransforms .cn-wrapper li a span {
font-size: 1.1em;
opacity: 0.7;
}
/* for a central angle x, the list items must be skewed by 90-x
degrees in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for
this demo) */
.csstransforms .cn-wrapper li:first-child {
transform: rotate(-10deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(2) {
transform: rotate(30deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(3) {
transform: rotate(70deg) skew(50deg)
}
.csstransforms .cn-wrapper li:nth-child(4) {
transform: rotate(110deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(5) {
transform: rotate(150deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(odd) a {
background-color: #a11313;
background-color: hsla(0, 88%, 63%, 1);
}
.csstransforms .cn-wrapper li:nth-child(even) a {
background-color: #a61414;
background-color: hsla(0, 88%, 65%, 1);
}
/* active style */
.csstransforms .cn-wrapper li.active a {
background-color: #b31515;
background-color: hsla(0, 88%, 70%, 1);
}
/* hover style */
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
background-color: #b31515;
background-color: hsla(0, 88%, 70%, 1);
}
.csstransforms .cn-wrapper li:not(.active) a:focus {
position: fixed; /* fix the "displacement" bug in webkit browsers
when using tab key */
}
</style>
</head>
<body>
<div>
<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li><a href="#"><span class="icon-picture"></span>
</a></li>
<li><a href="#"><span class="icon-headphones"></span>
</a></li>
<li><span class="icon-home"></span></li>
<li><span class="icon-facetime-video"></span>
</li>
<li><a href="#"><span class="icon-envelope-alt"></span>
</a></li>
</ul>
</div>
<div id="cn-overlay" class="cn-overlay"></div>
</div>
<script>
$(document).ready(function(){
var button = document.getElementById('cn-button'),
wrapper = document.getElementById('cn-wrapper'),
overlay = document.getElementById('cn-overlay');
//open and close menu when the button is clicked
var open = false;
button.addEventListener('click', handler, false);
button.addEventListener('focus', handler, false);
wrapper.addEventListener('click', cnhandle, false);
function cnhandle(e) {
e.stopPropagation();
}
function handler(e) {
if (!e) var e = window.event;
e.stopPropagation();//so that it doesn't trigger click
//event on document
if (!open) {
openNav();
}
else {
closeNav();
}
}
function openNav() {
open = true;
button.innerHTML = "-";
classie.add(overlay, 'on-overlay');
classie.add(wrapper, 'opened-nav');
}
function closeNav() {
open = false;
button.innerHTML = "+";
classie.remove(overlay, 'on-overlay');
classie.remove(wrapper, 'opened-nav');
}
document.addEventListener('click', closeNav);
});
</script>
</body>
</html>
Try another version of jquery
Download min.js files and put it on local directory and give a valid path in src.
It might help you.
http://jquery.com/download/
Use absolute or relative paths eg. '/js/jquery.js' using webroot or '../js/jquery.js' depending on where you're calling the file from (Using absolute path is better). Try not using the ~ indicator.
Instead of this:
<script src="~/Scripts/jquery-1.11.2.js"></script>
Use:
<script src="/Scripts/jquery-1.11.2.js"></script>
depending on where the file is in relation to the webroot.
There might be something wrong with your jquery file.
Try using the online version from google.
1.x link:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
2.x link:
https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
I don't know what the problem was, but I created a new project and added all the .js scripts one by one and that worked.