How to give page transition, with each category name and qty, I mean when I click office category, it will show an popup overlay with that name caption also qty while loading, don't mind for the category name, and qty, it will do on PHP, I just need each transition will showing that overlay effect.
<div class="desk-08 tab-08 mob-hide prod-nav">
<h2 id="prod-title">Products</h2>
<div id="shop-categories-with-links-and-totals">
<ul class="products-nav-list">
<li class="md-top-product-category-link "><span class="nav-all-desktop">All</span><span class="nav-all-mobile">Products</span><span class="md-top-product-category-count"><span>138</span></span></li>
<li class="md-top-product-category-link">Office<span class="md-top-product-category-count"><span>27</span></span></li>
<li class="md-top-product-category-link">Books & Magazines<span class="md-top-product-category-count"><span>39</span></span></li>
<li class="md-top-product-category-link">Home<span class="md-top-product-category-count"><span>45</span></span></li>
<li class="md-top-product-category-link">Children<span class="md-top-product-category-count"><span>23</span></span></li>
<li class="md-top-product-category-link">Outdoor<span class="md-top-product-category-count"><span>10</span></span></li>
<li class="nav-search-link">Search</li>
<li class="nav-index-link">Index</li></ul></div>
</div>
ul.products-nav-list li {
margin-right: 12px;
display: inline;
float: left;
}
.navigation ul li {
color: #8A8A8A;
border-top: 0px none;
display: inline-block;
}
.navigation ul li a {
padding: 0px;
outline: 0px none;
}
.navigation ul li a {
line-height: 51px;
height: 50px;
}
.navigation ul li a {
color: #8A8A8A;
padding: 0px;
display: block;
line-height: 34px;
height: 32px;
}
.navigation ul li a .md-top-product-category-count {
display: inline;
}
.navigation ul li a .md-top-product-category-count {
display: none;
color: #8A8A8A;
vertical-align: super;
font-size: 0.8em;
padding: 0px 0px 0px 5px;
}
I'd probably include a div in the structure as the overlay and then toggle the class.
div#overlay {
height:100%;
width:100%;
overflow:hidden;
display:none;
background-color:rgba(0,0,0,0);
-webkit-transition: background-color 600ms ease;
-moz-transition: background-color 600ms ease;
-ms-transition: background-color 600ms ease;
transition: background-color 600ms ease;
}
div#overlay.active {
display:block;
background-color:rgba(0,0,0,.8);
}
Then you could use .toggleClass on click
$('a').on('click', function(e){
$('div#overlay').toggleClass('active');
});
Note, because of display:none; this method wont fade back. It will simply disappear.
Related
Me and my friend are pretty new to html and css, he knows a little bit of javascript and we're trying to fix this one issue we're having right now.
We made a couple of buttons and added a dropdown menu to one of them using li and ul, the first thing we tried to fix was for the dropdown menu to not push down the remaining elements or text or the content below it. We managed to do that, however, now whenever you mouseover/hover the dropdown menu button which is "Products" in our case, the background of the dropdown menu blocks the mouseover so the highlighted background of the button itself won't be completely shown and the mouseover doesn't work on the entire area of the button.
ul {
text-align: center;
list-style: none;
overflow: hidden:
}
ul li a {
text-decoration: none;
color: red;
text-align: center;
padding: 10px;
font-size: 18px;
float: left;
text-decoration: none;
font-weight: bold;
font-family: Garamond, serif;
}
ul li ul {
display: none;
background-color: blank;
}
ul li a:hover {
color: #fff;
border-radius: 10px;
background-color: blank;
text-decoration: none;
color: rgb(0, 204, 204);
background: rgb(128, 128, 128);
font-weight: normal;
transition: all 0.21s ease-in-out;
}
ul li ul.dropdown {
display: none;
position: absolute;
background-repeat: no-repeat;
height: 0;
transition: all 1s ease-in-out;
}
ul li:hover ul.dropdown {
display: block;
height: 200px;
opacity: 1;
}
.navigation ul {
display: flex;
}
<body>
<div class="navigation">
<ul>
<li><span><ion-icon name="home-outline"></ion-icon></span><span> Home</span></li>   
<li><span><ion-icon name="information-circle-outline"></ion-icon></span><span> About</span></li>   
<li class="pro">
<span><ion-icon name="bar-chart-outline"></ion-icon></span><span> Products ▾ </span>   
<ul class="dropdown">
<br>
<li><span>Laptops</span></li>
<li><span>Monitors</span></li>
<li><span>Printers</span></li>
</ul>
</li>
<li><span><ion-icon name="mail-open-outline"></ion-icon></span><span> Contact</span></li>
</ul>
</div>
</body>
One solution is to position the dropdown at the bottom of the menu button with top:100%. That way, the dropdown will not block the menu button.
Note that absolute positioning places the dropdown "relative to its closest positioned ancestor" (see position), so I've added position:relative to the dropdown's parent <li> to make it "positioned".
ul {
list-style: none;
padding: 0;
}
.navigation > ul {
display: flex;
}
ul li a {
display: block;
color: red;
padding: 10px;
font-size: 18px;
text-decoration: none;
font-weight: bold;
font-family: Garamond, serif;
}
ul li a:hover {
border-radius: 10px;
color: rgb(0, 204, 204);
background: rgb(128, 128, 128);
transition: all 0.21s ease-in-out;
}
.navigation > ul > li {
position: relative;
}
.dropdown {
display: none;
position: absolute;
top: 100%;
transition: all 1s ease-in-out;
}
li:hover .dropdown {
display: block;
}
<div class="navigation">
<ul>
<li><span><ion-icon name="home-outline"></ion-icon></span><span> Home</span></li>
<li><span><ion-icon name="information-circle-outline"></ion-icon></span><span>About</span></li>
<li>
<span><ion-icon name="bar-chart-outline"></ion-icon></span><span>Products ▾</span>
<ul class="dropdown">
<li><span>Laptops</span></li>
<li><span>Monitors</span></li>
<li><span>Printers</span></li>
</ul>
</li>
<li><span><ion-icon name="mail-open-outline"></ion-icon></span><span>Contact</span></li>
</ul>
</div>
I have already asked this question but didn't get any answers so I'll try once again.
I have built a navigation menu on WordPress using jQuery to have a slide down/up animation on the submenus. I am using flexbox on the submenus which is what seems to cause the problems. When I change it to block it works fine but the design is not what I am looking for.
The problem and how to recreate it: The first time you refresh the page (or run the code on jsfiddle) and hover over the menu, the submenu will slide down over the height it should stop at and snap back after that. After that all the other submenus work fine. It's just I would like to fix that snap back since it does not look that good.
Does anyone have an idea why this is happening and/or how to fix it?
Link for the jsfiddle where you can test the problem yourself: https://jsfiddle.net/u2zs38oL/
And the code for the jsfiddle below:
HTML:
<header>
<nav class="main-navigation" id="desktop-navigation">
<div class="container-fluid">
<div class="menu-menu-1-container">
<ul id="menu-menu-2" class="d-flex justify-content-center">
<li
class="has-mega-menu menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-92">
Test
<ul class="sub-menu">
<li
class="mega-menu-column menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-93">
Test
<ul class="sub-menu">
<li
class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-94">
Test</li>
</ul>
</li>
<li
class="mega-menu-column menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-149">
Test
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-150">
Test</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
CSS:
header .main-navigation {
display: block;
margin-left: 1rem!important;
margin-right: 1rem!important;
text-transform: uppercase;
}
header .main-navigation > div {
background: #000;
position: relative;
}
header .menu-menu-1-container {
height: 50px;
white-space: initial;
}
header #menu-menu-2 {
list-style: none;
margin: 0;
flex-direction: row;
}
header #menu-menu-2 > .menu-item {
padding: 0 20px;
height: 50px;
border-bottom: 3px solid;
border-color: #000;
display: flex;
align-items: center;
justify-content: center;
}
header #menu-menu-2 .menu-item:hover {
border-color: red;
transition: 0.1s ease-in-out;
}
header #menu-menu-2 > li:hover > a {
color: red;
}
header .has-mega-menu > .sub-menu {
position: absolute;
background: #fff;
top: 50px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
header #menu-menu-2 li, header #menu-menu-2 ul {
list-style: none;
padding: 0;
}
header #menu-menu-2 li a {
text-decoration: none;
}
header #menu-menu-2 > li > a {
color: #fff;
}
header .has-mega-menu a {
color: #000;
}
header .mega-menu-column {
margin-left: 10px;
margin-top: 25px;
margin-bottom: 25px;
padding: 0 15px!important;
}
header .mega-menu-column > a {
position: relative;
font-weight: 600;
letter-spacing: 1px;
padding-bottom: 10px;
pointer-events: none;
}
header .mega-menu-column > a::before {
content: "";
position: absolute;
height: 1px;
width: 14px;
bottom: 0;
background-color: #000;
opacity: 0.2;
}
header .mega-menu-column ul {
margin-top: 20px;
}
header .mega-menu-column ul li {
padding: 5px 0!important;
}
header .mega-menu-column ul a {
color: grey;
font-weight: 400;
line-height: 25px;
transition: all 0.3s ease-in-out;
text-transform: capitalize;
display: block;
}
header .mega-menu-column ul li a:hover {
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-ms-transition: -ms-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translateX(5px);
-moz-transform: translateX(5px);
-ms-transform: translateX(5px);
-o-transform: translateX(5px);
transform: translateX(5px);
color: #000;
border-bottom: 1px solid red;
}
.d-flex {
display: flex;
}
.justify-content-center {
justify-content: center;
}
jQuery:
jQuery(document).ready(function() {
jQuery('.main-navigation .has-mega-menu').hover(function() {
jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideDown({start: function() {
jQuery(this).css('display', 'flex');
}, duration: 250
});
jQuery(this).children('.sub-menu').css('z-index', '3')
}, function() {
jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideUp(250);
jQuery(this).children('.sub-menu').css('z-index', '2')
});
});
I found a way around this problem (at least for my case). So I found if on page reload, the submenu that is hidden and shown, has display flex instead of none then there seems to be no problems with the snapping. But obviously I do not want to start with the menu opened.
So what I did was set the submenu to flex and hid the menu with z-index until the jQuery has loaded and then hid (set display none) the submenu with jQuery. Then when hovering over the menu item toggled the slideDown and added higher z-index to that object.
Fiddle can be found here: https://jsfiddle.net/e319ydkm/
Changes I made to the original code:
header .has-mega-menu > .sub-menu {
display: none -> flex;
z-index: -1;
}
.hide-under {
background: #fff;
z-index: 1;
height: 1000px;
}
jQuery('.main-navigation .has-mega-menu > .sub-menu').hide();
This of course is not a perfect solution and I couldn't really figure out what is causing it other than that it is caused by flexbox (probably). I will not mark this reply as an answer since this isn't really the solution.
I am currently working on a website with a navigation bar at the top of the screen that is initially transparent when you first visit the site, but turns into a white bar with black text the moment you start scrolling down. It also shrinks a little. It has a really nice and smooth transition as it changes it's color and shrinks, but when you scroll back to the top of the page, there is no more smooth transition but rather an instant ugly transition. Actually the changing of the color back to transparent seems okay but the resize of the bar lacks the transition. I uploaded a GIF so you can see exactly what's the problem.
There is a second problem I would like to ask for. As you can see in the GIF, there is an underline animation on text hover, however, I cannot get it to work on the white navbar. I want that underline to become black, just like the text and shrink with the rest of the navbar.
Here is the GIF:
https://media.giphy.com/media/5jYbvzN9OzaVm3IRE6/giphy.gif
Also the CSS:
/* -=-=-=-=-= FONT IMPLEMENTATION =-=-=-=-=- */
#import url('https://fonts.googleapis.com/css?family=Quicksand:300|Roboto:100');
/* -=-=-=-= END FONT IMPLEMENTATION =-=-=-=- */
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Roboto",sans-serif;
font-weight: lighter;
}
header.index {
width: 100%;
height: 100vh;
background: url(../res/images/back.png) no-repeat 50% 50%;
background-size: cover;
}
header.page1 {
width: 100%;
height: 100vh;
background: url(../res/images/test.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
}
.logoimg {
position: fixed;
display: inline-block;
float: left;
width: 235px;
height:54px;
margin: 37px 80px;
transition: 0.5s ease-in-out;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: 0.5s ease-in-out;
}
nav ul {
line-height: 100px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 50px;
transition: 0.5s ease-in-out;
}
nav ul li {
display: inline-block;
padding: 16px 20px;
transition: 0.5s ease-in-out;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 24px;
transition: 0.5s ease-in-out;
}
nav ul li a.current{
font-weight: 600;
}
nav.scrolled{
background: #fff;
min-height: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled ul li a{
text-decoration: none;
color: #000;
font-size: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled img{
width: 180px;
height: 41px;
margin: 27px 80px;
transition: 0.5s ease-in-out;
}
/* -=-=-=-=-= MENU ITEM HOVER ANIMATION =-=-=-=-=- */
.menu a {
transition: color 0.1s, background-color 0.1s;
}
.menu a {
position: relative;
display: block;
transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
color: #fff;
}
.menu a::before {
content: '';
display: block;
position: absolute;
bottom: 24px;
left: 0;
height: 2px;
width: 100%;
background-color: #fff;
transform-origin: right top;
transform: scale(0, 1);
transition: color 0.1s,transform 0.2s ease-out;
}
.menu a:active::before {
background-color: #fff;
}
.menu a:hover::before, a:focus::before {
transform-origin: left top;
transform: scale(1, 1);
}
.menu.scrolled {
color: #000;
background-color:
}
/* -=-=-=-=-= END MENU ITEM HOVER ANIMATION =-=-=-=-=- */
And the JS:
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('scrolled');
}
else {
$('nav').removeClass('scrolled');
}
})
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop()> 2) {
$('.logo img').attr('src', 'res/logos/main.png');
}
if ($(this).scrollTop() < 2) {
$('.logo img').attr('src', 'res/logos/main_light.png');
}
});
});
And the important HTML:
<header class="index">
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logoimg" src="res/logos/main_light.png">
</a>
</div>
<div class="menu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li>Company</li>
<li>Services</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
Note that .scrolled is the one that changes the navbar once you scrolled. May your road lead you to warm sands!
You're setting the transition for the a elements twice. First as .menu a and then as nav ul li a. The nav bar animates when scrolling up, but the transition lasts 0.1s, as declared for the selector .menu a.
You can either change .menu a to .menu nav ul li a or redesign your classes.
For the underline animation, just add the nav.scrolled selector to the classes you already have, for instance: nav.scrolled .menu a::before and change the background color. You will probably also need to re position the ::before element.
I am currently trying to implement smooth scrolling with a position indicator in my navigation menu. I want to be able to change the color or distinguish between the active part of the fixed nav bar when scrolling (i.e. when in the about section the about part of the navbar is highlighted). Does anyone have some advice? I don't want to use bootstrap or a plugin.
Here is the html for my nav bar:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<ul class="top-menu">
<li id="home">HOME</li>
<li id="about">ABOUT</li>
<li id="contact">CONTACT</li>
</ul>
</div>
</nav>
SCSS:
nav{
/* spacing */
text-align: center;
/*font*/
font-size: 30px;
/* alignment */
vertical-align: middle;
z-index: 9999;
border-radius: 0;
position: fixed;
/* dimensions */
height: 80px;
width: 100%;
top: 0;
border-width: 5px;
ul{
margin-top:15px;
}
ul li{
vertical-align: middle;
margin: 10px;
display: inline-block;
margin-top:4px;
text-decoration: none;
}
ul li a, ul li a.active{
color: white;
vertical-align: middle;
margin: 5px;
font-size: 30px;
text-decoration: none;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
}
}
Javascript:
$(function() {
var pgurl = window.location.href.substr( window.location.href.lastIndexOf("/") + 1);
$(".navbar ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});
Here is the html code:
<div class="main-nav main-nav-default">
<div class="container">
<div class="main-nav-logo">
<a class="logo-color" href="index.html">Centaur <span class="brand">Research</span></a>
</div>
<div class="main-nav-links">
<ul id="responsive">
<li>Home</li>
<li>About</li>
<li class="dropdown">Services
<ul class="dropdown-lists">
<li>Research Sector</li>
<li>Online Research</li>
<li>Travel Research</li>
</ul>
</li>
<li class="dropdown">Panel
<ul class="dropdown-lists">
<li>Discussion Group</li>
</ul>
</li>
<li>Contact</li>
<li class="dropdown">Language
<ul class="dropdown-lists">
<li><div class="translate"><div id="google_translate_element"></div></div> <script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-38654447-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></li>
</ul>
</li>
</li>
</ul>
</div>
</div>
Here is the jQuery:
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
$(".dropdown-lists").mouseleave(function(){
$(this).slideUp();
});
});
Basically the thing is that the dropdown works perfectly when I hover over it but it doesnt disappear unless I hover over the submenu thats .dropdown-lists class. If I hover over the .dropdown class and navigates away without hovering over the submenu the submenu doesn't disappear. It stays still unless I hover it over at least once.
I understand my jQuery only allows to slide the menu Up when it is hovered once, I want to know a code combination that would work even if I don't hover over the submenu.
Additionally here is the Dropdown CSS code, I doubt the the submenu somehow is not a child element of the parent main-nav-link or #responsive:
.main-nav-links {
padding: 20px 0px 20px 0px;
}
#responsive {
text-align: right;
}
#responsive li {
position: relative;
text-align: right;
display: inline-block;
}
#responsive li > a {
font-family: "Open Sans";
font-weight: 700;
padding-right: 10px;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (max-width: 992px){
#responsive li > a {
font-size: 12px;
}
}
#responsive li > a:hover {
color: #19B5FE;
}
.dropdown-lists {
text-align: center;
}
#responsive li .dropdown-lists li {
list-style: none;
margin-left: -29px!important;
border-top: 1px solid rgba(60,60,60,0.9);
padding: 10px 0px 10px 0px;
}
#responsive li .dropdown-lists li > a {
color: rgba(204,204,204,0.8);
font-size: 12px;
font-weight: 400;
}
#responsive li .dropdown-lists li > a:hover{
color: #fff;
}
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 200%;
background: rgba(51, 51, 51, 0.8);
}
Update your jquery like this.
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
}).mouseleave(function(){
$(this).find(".dropdown-lists").slideUp();
});
DEMO
EDIT:
Additional problem comes for the dropdown in your latest fiddle because of the top property you have used in the dropdown CSS. Update the following class in your CSS.
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 100%; /* It was 200% earlier */
background: rgba(51, 51, 51, 0.8);
}
.dropdown
{
height:40px;
}
Updated DEMO