I was making a website for e-invitations. Have made everything but stuck at one place.
The menu of desktop view is working fine but when opened on the mobile its not working. I click on the menu button nothing happens. Please find below the screenshot.
HTML
<body>
<div id="container" class="container intro-effect-push animsition" style="animation-duration: 1500ms; opacity: 1;">
<nav id="main_menu" class="menugray">
<div id="menu-button" class="menu-opened">
</div>
<ul class="open" style="display: none;">
<li><a class="fade-page" href="index2.html"><span data-hover="HOME">HOME</span></a></li>
<li> <a class="fade-page" href="knowus.html"><span data-hover="BRIDE & GROOM">BRIDE & GROOM</span></a>
</li>
<li><span data-hover="EVENTS">EVENTS</span></li>
<li><span data-hover="RSPV">RSPV</span></li>
<li><span data-hover="PHOTOS">PHOTOS</span></li>
</ul>
</nav>
CSS
#main_menu li a span::before {
position: absolute;
top: -100%;
color:#e76b71;
content: attr(data-hover);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#main_menu:after,
#main_menu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-button {
position: absolute;
padding-left: 1.25em;
font-size:30px;
top:8px;
right:8px;
display: none;
cursor:pointer;
}
#menu-button:before {
content: "";
position: absolute;
top: 0.25em;
left: 0;
width: 1em;
height: 0.125em;
border-top: 0.375em double #333;
border-bottom: 0.135em solid #333;
}
Screenshots
If I change the code to
<ul class="open" style="display: block;">
initially it was display:none
After changing the display is:
This question might be asked several time. But request someone to help me. I would be very thankful for this.
Don't worry i found a solution for you..
See flowing code:
<div id="container" class="container intro-effect-push animsition" style="animation-duration: 1500ms; opacity: 1;">
<nav id="main_menu" class="menugray">
<label for="open-nav" class="menu-opened" id="menu-button"></label>
<input id="open-nav" class="menu-opened" type="checkbox">
<ul class="open" style="display: none;">
<li><a class="fade-page" href="index2.html"><span data-hover="HOME">HOME</span></a></li>
<li> <a class="fade-page" href="knowus.html"><span data-hover="BRIDE & GROOM">BRIDE & GROOM</span></a>
</li>
<li><span data-hover="EVENTS">EVENTS</span></li>
<li><span data-hover="RSPV">RSPV</span></li>
<li><span data-hover="PHOTOS">PHOTOS</span></li>
</ul>
</nav>
</div>
And the css is:
#main_menu li a span::before {
position: absolute;
top: -100%;
color: #e76b71;
content: attr(data-hover);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#main_menu:after,
#main_menu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-button {
position: absolute;
padding-left: 1.25em;
font-size: 30px;
top: 8px;
right: 8px;
cursor: pointer;
}
#menu-button:before {
content: "";
position: absolute;
top: 0.25em;
left: 0;
width: 1em;
height: 0.125em;
border-top: 0.375em double #333;
border-bottom: 0.135em solid #333;
}
#open-nav:checked + .open {
display: block !important;
}
#open-nav {
display: none;
}
Codepen link for your preview: https://codepen.io/ziruhel/pen/gXOBVK
Related
I'm using Bulma CSS Tabs component with the is-boxed modifier. Fantastic out of the box styling but I would like to change how the active tabs' borders look. What I wanted to achieve is:
I've tried skewing the elements, but it's really not working as expected as I have to take into consideration the next list item especially in the middle when active. Here's what I've tried so far:
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span>Music</span>
</a>
</li>
<li>
<a>
<span>Videos</span>
</a>
</li>
</ul>
</div>
This is the CSS:
li.is-active a {
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-ms-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
border-top: 0;
border-left: 0;
}
li.is-active a span {
-webkit-transform: skew(-20deg) !important;
-moz-transform: skew(-20deg) !important;
-ms-transform: skew(-20deg) !important;
-o-transform: skew(-20deg) !important;
transform: skew(-20deg) !important;
}
Maybe like following snippet (plain css):
const app = Vue.createApp({
data() {
return {
tabs: ['Pictures', 'Music', 'Videos'],
active: 0,
};
},
methods: {
activate(id) {
this.active = id
}
}
})
app.mount('#demo')
.tabs ul {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style-type: none;
margin: .5em 1em;
}
.is-active:before, .is-active:after {
border: none;
}
li {
position: relative;
padding: 0.3em 0.8em;
cursor: pointer;
z-index: 0;
}
li:before,
li:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
width: 70%;
}
li:before {
left: -1px;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
li:after {
right: -1px;
border-right: 2px solid #000;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
li:after,
li:nth-child(odd):before {
transform: skewX(-15deg)
}
li:before,
li:nth-child(odd):after {
transform: skewX(15deg)
}
li:first-of-type:before {
transform: skewX(0deg)
}
li:last-of-type:after {
transform: skewX(0deg)
}
li:hover {
color: #fff;
}
li:hover:before,
li:hover:after {
background: #000;
}
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<div id="demo">
<div class="tabs is-boxed">
<ul>
<li v-for="(tab, idx) in tabs" :key="idx" :class="active === idx && 'is-active'" #click="activate(idx)">
<a>
<span>{{ tab }}</span>
</a>
</li>
</ul>
</div>
</div>
I have tried to add a hamburger menu to my web page but it keeps going under the images and texts. I changed the z-index with different numbers but it still doesn't work.the menu it self has no problem and works somoothly but when I shrink the page, the images and the texts are on the menu if anyone knows please give a suggestion. Thank you
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked+.menu__btn>span {
transform: rotate(45deg);
}
#menu__toggle:checked+.menu__btn>span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked+.menu__btn>span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked~.menu__box {
left: 0 !important;
}
.menu__btn {
position: absolute;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1000;
}
.menu__btn>span,
.menu__btn>span::before,
.menu__btn>span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #08ebfc;
transition-duration: .25s;
}
.menu__btn>span::before {
content: '';
top: -8px;
}
.menu__btn>span::after {
content: '';
top: 8px;
}
.menu__box {
display: block;
position: absolute;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: #CFD8DC;
}
<div class="bg">
<div class="hamburger-menu">
<!--this is the part for the menu-->
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><a class="menu__item" href="#">Home</a></li>
<li><a class="menu__item" href="#">About</a></li>
<li><a class="menu__item" href="#">Team</a></li>
<li><a class="menu__item" href="#">Contact</a></li>
<li><a class="menu__item" href="#">Twitter</a></li>
</ul>
</div>
<h1 class="neonText" style="text-align:center; padding:3% auto 1% auto;">TRANSFORMERS</h1>
<div class="container">
<img src="dece.jpg" alt="Decepticon logo" style="width:100%;">
<h1 class="h1-d">DECEPTICONS</h1>
<div class="content">
</div>
</div>
For me, it goes up the image and text, there might be interfernce with some other css codes.
I seem to be getting an issue with my CSS animation where when I close the Dropdown the background disappears straight away whilst the rest fades away and it makes the dropdown look strange, I have tried everything I can find on CSS animation with no luck so I thought I'd reach out to see if anyone knew.
index.html
<li class="menu-item-3 dropdown">
<a>Info for volunteers</a>
<ul class="child">
<li>
<a href="<?php echo $root; ?>volunteers/your-roles/">
<div class="bold">Your roles</div>
<div class="sub">Your current roles and support</div>
</a>
</li>
<li>
<a href="<?php echo $root; ?>volunteers/news/">
<div class="bold">News</div>
<div class="sub">News for members</div>
</a>
</li>
<li>
<a href="<?php echo $root; ?>volunteers/information/">
<div class="bold">Information</div>
<div class="sub">Useful downloads and pages</div>
</a>
</li>
</ul>
</li>
style.css
.header .nav_container .desktop ul li ul.child {
display: block;
position: absolute;
top: calc( 100% + 30px );
z-index: 900;
background-color: #fff;
right: -10px;
min-width: 200px;
margin: 0;
overflow: hidden;
border: none;
padding: 0 32px;
box-shadow: 2px 2px 0 0 rgba(77, 77, 77, 0.3);
opacity: 0;
visibility: hidden;
animation: fadeout 0.3s;
}
.header .nav_container .desktop ul li ul.child.open {
opacity: 1;
visibility: visible;
animation: fadein 0.3s;
}
#keyframes fadein {
from { opacity: 0;margin-top: 40px; }
to { opacity: 1;margin-top: 0px; }
}
#keyframes fadeout {
from { opacity: 1;margin-top: 0px; }
to { opacity: 0;margin-top: 40px; }
}
Any ideas would be most appreciated. Thanks in advance for taking the time to read this.
Hello the code you posted seems to be incomplete and i would guess you are using some other CSS libraries, nevertheless form what i understand you want to achieve the below.
EDIT:
visibility:hidden attribute should be removed from the .header .nav_container .desktop ul li ul.child selector
.header .nav_container .desktop ul li ul.child {
display: block;
position: absolute;
top: calc( 100% + 30px );
z-index: 900;
background-color: #fff;
right: -10px;
min-width: 200px;
margin: 0;
overflow: hidden;
border: none;
padding: 0 32px;
box-shadow: 2px 2px 0 0 rgba(77, 77, 77, 0.3);
opacity: 0;
animation: fadeout 0.3s;
}
.header .nav_container .desktop ul li ul.child.open {
opacity: 1;
visibility: visible;
animation: fadein 0.3s;
}
#keyframes fadein {
from { opacity: 0;margin-top: 40px; }
to { opacity: 1;margin-top: 0px; }
}
#keyframes fadeout {
from { opacity: 1;margin-top: 0px; }
to { opacity: 0;margin-top: 40px; }
}
I am trying to add an open and close triangle to my dropdown menu using CSS ::after concept. Here's my code.
<div class="row-links-platforms-and-flavor">
<div class="website-links">
<ul class="outer-links">
<li><a>Other Links</a>
<div class="links">
<ul class="inner-links">
<li><a class="website-link" href="#"
target="_blank">Link 11</a>
</li>
<li><a class="website-link" href="#"
target="_blank">Link 2</a>
</li>
<li><a class="website-link" href="#"
target="_blank">Link 3</a></li>
</ul>
</div>
</li>
</ul>
</div>
$color-white: #fff;
$color-black: #000;
$color-grey-light: #eaeaea;
$color-grey-dark: #F2F2F2;
$color-services-light: #951D21;
$color-services-dark: #7d1119;
$color-benchmarks-light: #44546a;
$color-benchmarks-dark: #303c4a;
$color-disabled: #e8e8e8bf;
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
a {
text-decoration: none;
}
}
.website-links {
flex: 1 1 15%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.outer-links {
position: relative;
cursor: pointer;
&:hover .inner-links {
transform: scale(1, 1);
transition: all 150ms ease-in;
}
&::before {
content: '\25BC';
position: absolute;
top: 0;
right: 0;
color: $color-services-light;
left: .5rem;
}
&:hover::before {
content: '\25B2';
position: absolute;
top: 0;
right: 0;
color: $color-services-light;
left: .5rem;
}
}
// 2022
.inner-links {
position: absolute;
border-radius: .5rem;
background-color: $color-grey-light;
z-index: 1000;
width: 20rem;
top: 100%;
right: -50%;
box-shadow: 0 0 1.5rem rgba($color-black, .15);
transform: scale(1, 0);
transform-origin: top;
transition: all 150ms ease-in 200ms;
li {
font-weight: 400;
text-align: center;
&:not(:last-child) {
border-bottom: 1px solid $color-white;
}
&:hover {
background-color: $color-white;
font-weight: 700;
}
a {
display: inline-block;
width: 100%;
padding: 1.5rem;
color: $color-black;
}
}
}
}
The triangle doesn't move to the right. If I don't give any position, the triangle appears properly at the beginning, but, I want it at the end of Other Links. What am I missing?
The problem you face it is , that first you set left: .5rem and after that you set right:0;
If you want to get it to the right , remove left property and add right: -.5rem or wahtever you want it :)
&::before {
content: '\25BC';
position: absolute;
top: 0;
right: -1rem;
color: $color-services-light;
/* remove it left: .5rem; */
}
Hope this explanation could helps you ...
I forgot to add and this change on hover :
&:hover::before {
content: '\25B2';
position: absolute;
top: 0;
right: -1rem;
color: $color-services-light;
/* left: .5rem; */
}
I think, right:-1rem; is what we looking for
I am trying to overflow my tooltip over the slider section (y axis).
Under the slider I have another slider with 9 elements (every one have a tooltip)
I want the slider below to be width 1170px with 5 elements. The remaining items should be hidden.
My English is poor so I mad short video 24s https://vimeo.com/216830963
And here is the code
section#slider {
width: 100%;
overflow: hidden;
padding-top: 110px;
padding-bottom: 0px;
height: 482px;
}
.wrap {
position: relative;
margin: 3em 0;
}
/* Frame */
.frame {
height: 130px;
line-height: 130px;
overflow-x: hidden;
/*overflow: hidden !important;*/
}
.frame ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
font-size: 50px;
}
.frame ul li {
float: left;
width: 227px;
height: 100%;
margin: 0 2px 0 0;
padding: 0;
background: #f1f1f1;
color: #00b5f6;
text-align: center;
cursor: pointer;
/*border-right: 1px solid #00b5f6;*/
}
.frame ul li:hover {
color: #fff;
background: #00b5f6;
}
/* Scrollbar */
.scrollbar {
margin: 0 0 1em 0;
height: 2px;
background: #ccc;
line-height: 0;
}
.scrollbar .handle {
width: 100px;
height: 100%;
background: #292a33;
cursor: pointer;
}
.scrollbar .handle .mousearea {
position: absolute;
top: -9px;
left: 0;
width: 100%;
height: 20px;
}
/* setup tooltips */
.tooltip {
position: relative;
overflow: visible;
}
.tooltip:before,
.tooltip:after {
position: absolute;
display: inline-block;
opacity: 0;
pointer-events: none;
width: 225px;
overflow: visible;
}
.tooltip:after {
border-right: 6px solid transparent;
border-top: 6px solid #00b5f6;
border-left: 6px solid transparent;
content: '';
height: 0;
top: -5px;
left: 20px;
width: 0;
}
.tooltip:before {
background: #00b5f6;
border-radius: 2px;
color: #fff;
content: attr(data-title);
font-size: 14px;
padding: 6px 10px;
top: -145px;
left: 0px;
white-space: nowrap;
height: 130px;
max-width: 207px !important;
}
/* the animations */
/* expand */
.tooltip.expand:before {
transform: scale3d(.2, .2, 1);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:after {
transform: translate3d(0, 6px, 0);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:hover:before,
.tooltip.expand:hover:after {
opacity: 1;
transform: scale3d(1, 1, 1);
}
<section id="slider">
<img src="http://localhost/wh1/wp-content/uploads/2016/02/si.png">
</section>
<div style="width:1170px; height:180px; margin-left:auto; margin-right:auto;">
<div style="max-width: 100%;">
<div class="wrap" style="margin:15px 0 15px 0; ">
<div class="scrollbar">
<div class="handle">
<div class="mousearea"></div>
</div>
</div>
<div class="frame" id="basic">
<ul class="clearfix">
<li class="tooltip expand" data-title="Text tooltip">1</li>
<li class="tooltip expand" data-title="Text tooltip">2</li>
<li class="tooltip expand" data-title="Text tooltip">3</li>
<li class="tooltip expand" data-title="Text tooltip">4</li>
<li class="tooltip expand" data-title="Text tooltip">5</li>
<li class="tooltip expand" data-title="Text tooltip">6</li>
<li class="tooltip expand" data-title="Text tooltip">7</li>
<li class="tooltip expand" data-title="Text tooltip">8</li>
<li class="tooltip expand" data-title="Text tooltip">9</li>
</ul>
</div>
</div>
</div>
</div>
I don't know how to fix it. Please help if You can
Thanks
Because you want to have that tool tip showing on the top of the scroll frame, you need to include a new wrapper from that image slider on the top. I mean like this:
And the wrapper must be overflow-x: hidden;
With this approach you can make the tool tip visible and that overflow from the scrolling area hidden
Give #basic or .frame a specific width and then apply css Overflow property