this is the code for my nav
.nav {
z-index: 1;
width: 100%;
background-color: red;
display: block;
position: absolute;
top: 100%;
}
.nav ul {
display: none;
}
and this is the code for my menu
/* checkbox (for menu) */
.menu-icon-wrap {
/* background color of checkbox */
top: 5.5px;
left: 960px;
/* position of entire menu /w checkbox */
position: absolute;
/* ^ this allows checkbox to be positioned */
cursor: pointer;
z-index: 1;
}
/* (menu) */
.menu-icon {
padding: 15px 20px;
display: block;
float: right;
/* ^ makes the menu go beside(next to) the checkbox */
cursor: pointer;
overflow: hidden;
position: relative;
z-index: 1;
}
.menu-icon .navicon {
position: absolute;
top: 14px;
left: 10px;
width: 20px;
height: 2.5px;
background: black;
border-radius: 4px;
transition: 0.5s;
display: block;
z-index: 1;
}
.menu-icon .navicon:before,
.menu-icon .navicon:after {
content: '';
transform: translateY(-6px);
width: 15px;
height: 2.5px;
background: black;
display: block;
position: relative;
}
.menu-icon .navicon:after {
content: '';
transform: translateY(+4.5px);
height: 2.2px;
width: 10px;
display: block;
position: relative;
background: black;
}
.menu-btn:checked ~ .menu-icon .navicon
{
background: transparent;
}
.menu-btn:checked ~ .menu-icon .navicon:after {
width: 21px;
transform: translateY(0px) rotate(315deg);
transition-delay: 0.125s;
}
.menu-btn:checked ~ .menu-icon .navicon:before {
width: 25px;
transform: translateY(0px) rotate(45deg);
transition-delay: 0.125s;
}
.menu-btn {
display: none;
}
.menu-btn:checked ~ .sub-nav {
display: block;
position: absolute;
top: 100;
left: 920px;
z-index: 2;
width: 100px;
height: 100px;
}
ul {
padding-left: 10px;
padding-top: 35px;
}
li {
display: block;
padding-left: 25px;
padding-top: 2px;
}
--color-link-toc: #878787;
.sub-nav {
display: none;
}
.sub-nav-item {
pointer-events: none;
opacity: 0;
display: block;
margin: 0.35rem 0;
opacity: 0;
}
.sub-nav-title {
pointer-events: none;
color: var(--color-link-toc);
}
and this is the html
<div.navbar class="navbar">
<!-- ^ header -->
<h2 class="nav__chapter"> Home</h2>
<div class="menu-icon-wrap">
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon">
<span class="navicon"></span>
</label>
</div>
<nav class="nav">
<!-- ^ nav -->
<ul class="sub-nav">
<li>Home</li>
<li>About</li>
<li>Testimonials</li>
<li>Moodboard</li>
<li>Contact</li>
</ul>
</nav>
</div.navbar>
please help me. I've been banging my head against the table trying to figure this out. I've spent days on this and can't get it working. I should be able to click the menu (checkbox) and when checked it should open the sub-nav or (nav). what am I doing wrong?
I'm trying to use this Search Form code but I want to make it so that on Click the magnifying glass icon switches to a Search button. I haven't been able to figure it out. Any ideas?
https://codepen.io/CBeghin/pen/HeuiF
<div id="wrap">
<form action="" autocomplete="on">
<input id="search" name="search" type="text" placeholder="What're we looking for ?"><input id="search_submit" value="Rechercher" type="submit">
</form>
</div>
#import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
#import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css);
body {
background: #DDD;
font-size: 15px;
}
#wrap {
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
position: relative;
}
input[type="text"] {
height: 60px;
font-size: 55px;
display: inline-block;
font-family: "Lato";
font-weight: 100;
border: none;
outline: none;
color: #555;
padding: 3px;
padding-right: 60px;
width: 0px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 3;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}
input[type="text"]:focus {
width: 700px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type="submit"] {
height: 67px;
width: 63px;
display: inline-block;
color:red;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
input[type="submit"]:hover {
opacity: 0.8;
}
Okay, so basically I am trying to write a carousel for ReactJS from scratch.
I've accomplished to code must of the features required as navigation, slides and so on.
The main purpose of this is to make it responsive, but that is what I am having a hard time figuring out how to do.
carousel.js
import React from 'react'
import { NavLink } from 'react-router-dom'
import classNames from 'classnames'
export default class Carousel extends React.Component {
constructor(props) {
super(props)
this.handleNext = this.handleNext.bind(this)
this.handlePrev = this.handlePrev.bind(this)
this.state = {
innerWidth: 0,
navPrevDisabled: true
}
}
componentWillMount() {
var stateItems = []
for(let i in this.props.items) {
stateItems.push(
<div className="react-item movie" key={i}>
<div className="front">
<div className="front-image" style={{backgroundImage: `url(${this.props.items[i].poster})`}}>
</div>
<div className="backdrop medium">
<div className="react-play-button fill">
<figure className="icon-content"></figure>
</div>
</div>
</div>
</div>
)
}
this.setState({
items: stateItems
})
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateCarousel, false)
}
updateCarousel = () => {
var $reactItem = $('.carousel-wrapper .carousel-inner .react-item')
var maxw = $('.carousel-wrapper').width()
/*var slideItemsFit = $reactItem.filter(function () {
return $(this).position().left < maxw
}).length*/
var itemsFitSlide = Math.floor(maxw / $reactItem.outerWidth(true))
console.log(itemsFitSlide)
var margin = $reactItem.outerWidth(true) * itemsFitSlide
margin = (maxw - margin) / itemsFitSlide / 2
$reactItem.css({marginLeft: `${margin}px`, marginRight: `${margin}px`})
this.setState({
itemsShownTotal: itemsFitSlide,
itemWidth: $reactItem.outerWidth(true),
navNextDisabled: (itemsFitSlide === this.state.items.length),
itemsFitSlide: itemsFitSlide
})
}
componentDidMount() {
this.updateCarousel()
window.addEventListener("resize", this.updateCarousel, false)
}
handleNext(e) {
var state = this.state
var maxw = $('.carousel-wrapper').width()
var innerWidth = -Math.abs(state.innerWidth - (state.itemWidth * state.itemsFitSlide))
var itemsLeft = state.items.length - state.itemsShownTotal
var lastSlide = state.itemsFitSlide > itemsLeft
if(lastSlide) {
innerWidth = -Math.abs(state.innerWidth - (state.itemWidth * itemsLeft))
}
var itemsShownTotal = (lastSlide)
? state.itemsShownTotal + itemsLeft
: state.itemsShownTotal + state.itemsFitSlide
this.setState({
itemsShownTotal: itemsShownTotal,
innerWidth: innerWidth,
navPrevDisabled: false,
navNextDisabled: itemsShownTotal === state.items.length
})
}
handlePrev(e) {
var state = this.state
var innerWidth = state.innerWidth + (state.itemWidth * state.itemsFitSlide)
//var itemsLeft = state.itemsFitSlide - state.itemsShownTotal
var firstSlide = false
if(innerWidth >= 0) {
firstSlide = true
innerWidth = 0
}
var itemsShownTotal = (firstSlide)
? state.itemsFitSlide
: state.itemsShownTotal - state.itemsFitSlide
this.setState({
itemsShownTotal: itemsShownTotal,
innerWidth: innerWidth,
navPrevDisabled: firstSlide,
navNextDisabled: false
})
}
render() {
var nav = {
prev: classNames({
navigation: true,
prev: true,
disabled: this.state.navPrevDisabled,
whiteframe: true
}),
next: classNames({
navigation: true,
next: true,
disabled: this.state.navNextDisabled,
whiteframe: true
})
}
return (
<section className="block collection carousel portrait">
<div className="scaffold">
<i className={nav.prev} onClick={this.handlePrev}></i>
<i className={nav.next} onClick={this.handleNext}></i>
<header className="collection-header">
<NavLink to={this.props.route}>
<h2>{this.props.title}</h2>
</NavLink>
</header>
<div className="carousel-wrapper">
<div className="carousel-inner use-transition" style={{transform: `translateX(${this.state.innerWidth}px)`}}>
{this.state.items}
</div>
</div>
</div>
</section>
)
}
}
Basically let's say there's 5 images in a slide, but only width enough in the wrapper to fit 4 images, I then want to redo the process and margin the 4 images to fit the center of the wrapper.
carousel.css
.scaffold {
position: relative;
}
.block.collection .collection-header {
margin: 0 0 20px;
position: relative;
padding-top: 20px;
}
.block.collection .collection-header h2 {
outline: none;
text-decoration: none;
margin: 0;
color: #212d33;
font-size: 2.6rem;
letter-spacing: -0.01em;
line-height: 36px;
font-weight: normal;
}
.block.collection.carousel .carousel-wrapper {
overflow: hidden;
width: 100%;
}
.block.collection.carousel .carousel-wrapper .carousel-inner {
display: inline-block;
margin-right: 5px;
white-space: nowrap;
}
.block.collection.carousel .carousel-wrapper .carousel-inner.use-transition {
transition: transform 0.5s ease-out;
}
.block.collection.portrait .react-item {
width: 186px;
margin: 0 0px 20px 0px;
}
.block.collection.portrait .react-item.hidden {
opacity: 0;
}
.block.collection .react-item {
position: relative;
display: inline-block;
vertical-align: top;
margin-top: 10px;
margin-bottom: 10px;
}
.block.collection.portrait .react-item .front {
height: 279px;
}
.block.collection .react-item .front {
background-color: #212d33;
position: relative;
display: block;
text-decoration: none;
}
.block.collection .react-item .front .front-image {
animation: fadein 500ms;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-size: cover;
}
.block.collection .react-item .backdrop {
transition: opacity 0.1s ease-in-out;
opacity: 0;
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 5;
text-align: center;
background: rgba(15, 22, 26, 0.25);
}
.block.collection .react-item .backdrop:hover {
opacity: 1;
}
.react-play-button.fill {
margin: 0;
width: 100%;
height: 100%;
background-size: 68px;
}
.react-play-button {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.react-play-button .icon-content {
width: 68px;
height: 68px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxzdHlsZT48IVtDREFUQVsKICAgICAgICBnIHsKICAgICAgICAgICAgc3Ryb2tlOiAjZmZmOwogICAgICAgIH0KICAgICAgICBnIGNpcmNsZSB7CiAgICAgICAgICAgIGZpbGw6IHJnYmEoMCwwLDAsMC4wKTsKICAgICAgICAgICAgc3Ryb2tlLXdpZHRoOiA0OwogICAgICAgIH0KICAgICAgICBnIHBvbHlsaW5lIHsKICAgICAgICAgICAgZmlsbDogdHJhbnNwYXJlbnQ7CiAgICAgICAgICAgIHN0cm9rZS13aWR0aDogMTA7CiAgICAgICAgfQogICAgXV0+PC9zdHlsZT4KCiAgICA8Zz4KICAgICAgICA8Y2lyY2xlIHI9IjQ4IiBjeD0iNTAiIGN5PSI1MCIgLz4KICAgICAgICA8cG9seWxpbmUgcG9pbnRzPSI0MSwyOCA2Myw1MCA0MSw3MiIgLz4KICAgIDwvZz4KPC9zdmc+);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.block.collection.carousel .navigation {
top: 49%;
border: none;
cursor: pointer;
position: absolute;
width: 66px;
background: rgba(249, 249, 251, 0.7);
width: 48px;
height: 60px;
display: block;
font-size: 0;
border-radius: 2px;
z-index: 10;
opacity: 1;
pointer-events: auto;
transition: opacity .3s ease-in-out;
}
.block.collection.carousel .navigation.disabled {
opacity: 0;
pointer-events: none;
}
.block.collection.carousel .navigation:hover {
background-color: #FFF;
}
.block.collection.carousel .navigation:hover::after {
opacity: 1;
}
.block.collection.carousel .navigation.prev {
left: -25px;
}
.block.collection.carousel .navigation.next {
right: -25px;
}
.block.collection.carousel .navigation::after {
transition: opacity .5s ease;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMy40IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMy40IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzIxMkQzMzt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0wLDEuNEwxMC42LDEyTDAsMjIuNkwxLjQsMjRsMTItMTJMMS40LDBMMCwxLjR6Ii8+Cjwvc3ZnPgo=) no-repeat;
width: 16px;
height: 24px;
content: '';
position: absolute;
top: 18px;
left: 18px;
opacity: 0.7;
}
.block.collection.carousel .navigation.prev::after {
left: 13px;
transform: rotate(180deg);
}
So I am trying to add a perspective transform on an element but it is cutting off the text in Safari. If you open the following CodePen in Chrome it displays normally, but in Safari the white text is cut off. I have searched other questions but none seemed to solve my problem.
-webkit-transform: perspective(26.08696em) rotateX(-30deg);
http://codepen.io/anon/pen/aOaNNX
I was facing the same problem today. I fixed the problem setting a transform: translateZ(10px); property to the text that was being cut. Change the value to something that makes sense to you.
.field--name-residential-status {
height: 70px;
width: 100px;
position: relative;
}
.property-status {
display: inline-block;
color: white;
letter-spacing: 0.09375em;
padding: 1.2em 2em;
position: relative;
z-index: 1000;
padding-top: 1em;
text-transform: uppercase;
}
.property-status span {
position: absolute;
z-index: 5000;
-webkit-transform: translateZ(5000px);
}
.field--name-residential-status:before {
display: block;
content: "";
background-color: #2F2F2F;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2000;
-webkit-transform: perspective(26.08696em) rotateX(-30deg);
-moz-transform: perspective(26.08696em) rotateX(-30deg);
-ms-transform: perspective(26.08696em) rotateX(-30deg);
-o-transform: perspective(26.08696em) rotateX(-30deg);
transform: perspective(26.08696em) rotateX(-30deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
Thanks for your positive response bt the major problem is that my apdivs are moving up/down when i zoom in/out my web browser.my coding is
#apDiv7 {
position: absolute;
left: 723px;
top: 1510px;
width: 207px;
height: 283px;
z-index: 106;
}
#apDiv9 {
position: absolute;
left: 947px;
top: 1510px;
width: 207px;
height: 283px;
z-index: 108;
}
#apDiv10 {
position: absolute;
left: 478px;
top: 1510px;
width: 207px;
height: 283px;
z-index: 109;
}
#apDiv56 {
position: absolute;
left: 478px;
top: 1825px;
width: 670px;
height: 239px;
z-index: 112;
}
#apDiv57 {
position: absolute;
left: 262px;
top: 1825px;
width: 194px;
height: 239px;
z-index: 113;
}
#apDiv59 {
position: absolute;
left: 266px;
top: 487px;
width: 453px;
height: 28px;
z-index: 114;
}
#apDiv60 {
position: absolute;
left: 965px;
top: 2113px;
width: 125px;
height: 125px;
z-index: 115;
}
#apDiv61 {
position: absolute;
left: 478px;
top: 539px;
width: 670px;
height: 422px;
z-index: 116;
}
#apDiv62 {
position: absolute;
left: 478px;
top: 1003px;
width: 670px;
height: 422px;
z-index: 117;
}
my website is http://www.xstvshop.com/3in1_juicer.html
Your quick and effective response is highly appreciable thanks