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.
Related
How can I create a toggle element without using pseduo ::before and ::after?
I want to create a toggle on an html page but without using the pseudo ::before and ::after.
I am currently using the method from w3Schools given here: https://www.w3schools.com/howto/howto_css_switch.asp
However, I don't want any ::before or ::after psuedo classes. I just want classes by alone, if possible. I tried rewriting my own class for this but didn't seem to work as intended.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
I tried making a sliderbefore element myself without the psudeo and it didn't seem to work. (it was missing the small circle inside the toggle)
.sliderbefore {
border-radius: 34px;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
box-shadow: 0 0 1px #2196F3;
}
With classList.toggle:
const a= document.getElementsByClassName('a');
const b= document.getElementsByClassName('b');
function changeColor(){
a[0].classList.toggle("d");
b[0].classList.toggle("e");
}
.a{
position: absolute;
border:1px solid red;
width: 500px;
height:300px;
background:green;
}
.b {
left:51px;
position: absolute;
top:2px;
float: right;
border-radius:50%;
width: 35px;
height:35px;
background: white;
transition: all 0.1s;
}
.c {
position: absolute;
top:40px;
left:130px;
border-radius:20px;
width: 90px;
height:40px;
background: #ced0d4;
}
.d{
background: blue;
}
.e{
left:4px;
}
<div class="a">
<div class="c" onclick="changeColor()">
<div class="b"></div>
</div>
</div>
I was able to create a toggle element by using javascript and html only instead of psuedo :before and :after
<html><head></head>
<script type="text/javascript">
function toggle(button) {
if (button.value == "OFF") {
button.value = "ON";
} else {
button.value = "OFF";
}
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
onclick="toggle(this);">
</form></body></html>
The element is an input which has a Value of ON.
The Toggle function will switch the toggler on and off when clicked.
I am trying to write a sidebar with expandable dropdown options and some smooth animations using pure css/js/html/jquery (no bootstrap).
I've written a sidebar like this before using bootstrap, see this example:
https://bootstrap-menu.com/demos/sidebar-nav-accordion.html
But now I'm trying to achieve the same end result using only pure css as a challenge, and to eliminate my reliance on bootstrap.
I've been working with this example so far but haven't gotten an expand/collapse accordion working yet:
var isSidebarOpen = false;
function sideNavClicked(){
console.log('sideNavClicked()')
isSidebarOpen ? closeNav() : openNav();
}
function openNav() {
console.log('openNav')
isSidebarOpen=true;
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
console.log('closeNav')
isSidebarOpen=false;
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="mySidebar" class="sidebar">
×
About
Expand This ▼
<ul>
<li>Coffee</li>
<li>Coverage</li>
</ul>
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="sideNavClicked()">☰</button>
<h2>Collapsed Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
</body>
</html>
Was wondering what small scale example I could incorporate into this code? Hosted on jsfiddle as well:
https://jsfiddle.net/martinradio/7wey2ujt/7/
With your animation, try:
#animatedObj{
filter: opacity: 0; /* or something else because there will be a gap */
-webkit-transition: filter 200ms linear;
}
.show{
filter: opacity: 1;
-webkit-transition: filter 200ms linear;
and then in your JS/Jquery
$('#animatedObj').click(function(){
$('#animatedObj').toggleClass('show')
if($('#animatedObj').hasClass('show')){
$('#animatedObj').append("<list thing>")
}else{
$('#animatedObj').remove("<list thing>")
}
})
Keep in mind that you may want a different css effect to be there instead.
You can try my solution here, hope it can solve your problem.
I added some animations.
var isSidebarOpen = false;
function sideNavClicked() {
isSidebarOpen ? closeNav() : openNav();
}
function openNav() {
isSidebarOpen = true;
document.getElementById('mySidebar').classList.add('sidebar-show');
document.getElementById('main').classList.add('main-show');
}
function closeNav() {
isSidebarOpen = false;
document.getElementById('mySidebar').classList.remove('sidebar-show');
document.getElementById('main').classList.remove('main-show');
}
function toggleMenuItem(element){
document.getElementById(element.dataset.ulid).classList.toggle("ul-show");
}
html,
body {
font-family: "Lato", sans-serif;
height: 100%;
margin: 0;
}
.super-animation{
-webkit-transition: -webkit-transform 300ms ease;
-webkit-transition-duration: 300ms;
-moz-transition: -moz-transform 300ms ease;
transition: transform 300ms ease;
}
.main-content{
margin: 0;
display: flex;
position: relative;
width: 100%;
height: 100%;
}
.sidebar {
height: 100%;
max-height: calc(100% - 15px);
width: 250px;
position: absolute;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
right: 0;
-webkit-transform: translate3d(calc(-100%), 0, 0);
-moz-transform: translate3d(calc(-100%), 0, 0);
transform: translate3d(calc(-100%), 0, 0);
}
.sidebar.sidebar-show{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
padding: 16px;
}
#main.main-show{
-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
transform: translate3d(250px, 0, 0);
}
.main-content .sidebar ul{
margin: 0;
max-height: 0px;
overflow: hidden;
transition: max-height 200ms ease-out;
}
.main-content .sidebar ul.ul-show{
transition: max-height 200ms ease-in;
max-height: 400px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-content">
<div id="mySidebar" class="sidebar super-animation">
×
About
<a data-ulid="expand_this" onclick="toggleMenuItem(this);" href="#">Expand This ▼</a>
<ul id="expand_this">
<li>Coffee</li>
<li>Coverage</li>
</ul>
Clients
Contact
</div>
<div id="main" class="super-animation">
<button class="openbtn" onclick="sideNavClicked()">☰</button>
<h2>Collapsed Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
</div>
</body>
</html>
Perhaps this is what you are looking for
I added a few lines into your javascript code and also added a few classes in html including ul tag and a tag using which the submenu is collapsed.
I have have added comments in the code that I added to let you know what was modified...
Take a look at the snippet
var isSidebarOpen = false;
function sideNavClicked() {
console.log("sideNavClicked()");
isSidebarOpen ? closeNav() : openNav();
}
function openNav() {
console.log("openNav");
isSidebarOpen = true;
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
console.log("closeNav");
isSidebarOpen = false;
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
////------------Added Line of Code----------------
const list = document.querySelector(".toggle--list");
// const submenu
document.querySelector(".submenu").classList.add("hidden");
list.addEventListener("click", e => {
document.querySelector(".submenu").classList.toggle("hidden");
});
///////////////////
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
/*-----------added line of code----------------*/
.hidden{
display:none;
visibility: hidden;
}
/*---------------------------------------------*/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="mySidebar" class="sidebar">
×
About
Expand This ▼
<!--Added classname here-->
<ul class="submenu">
<!--Added classname here-->
<li>Coffee</li>
<li>Coverage</li>
</ul>
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="sideNavClicked()">☰</button>
<h2>Collapsed Sidebar</h2>
<p>
Click on the hamburger menu/bar icon to open the sidebar, and push this
content to the right.
</p>
</div>
<script src="script.js"></script>
</body>
</html>
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 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'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. :)