Responsive navigation box

up vote
1
down vote

favorite

I made a navigation bar with CSS animation and javascript. But I could not make it responsive. I want the navigation bar animation to be none when the window is resized less than 700px and the animation should appear if it is greater than 700px.That means the transform property of three-d-box :hover on css paart must be hidden when window is resized to 700px.The navigation bar code is below;

$('.block-menu').find('a').each(function()

 var el = $(this),
 elText = el.text();
 
 el.addClass("three-d");
 el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
);

.container 
 width: match-parent;
 padding: 12px ;
 display: flex;
 align-items: center;
 justify-content: center;


a 
 color: #fc0;
 text-decoration:none;


.block-menu 
	width:fit-content; 
 height:fit-content;


.block-menu li 
	display: inline-block;


.block-menu li a 
	color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'Passion One', Arial, sans-serif;
	font-smoothing: antialiased;
	text-transform: uppercase;
	font-family: 'Righteous', cursive;
	overflow: visible;
 width:fit-content;
	height: fit-content;
	font-size: 1.6vw;
	padding: 15px 10px; 
 margin-left:auto;
 margin-right:auto;
 margin-top:1px;
 margin-bottom:1px;

.three-d 
	perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;

	.three-d:hover .three-d-box, 
	.three-d:focus .three-d-box 
		transform: translateZ(-25px) rotateX(90deg);
	

.three-d-box 
	transition: all 0.3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;


.front 
	transform: rotatex(0deg) translatez(25px);


.back 
	transform: rotatex(-90deg) translatez(25px);
	color: #ffe7c4;


.front, .back 
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius:15%;
	background: black;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	box-sizing: border-box;


.back 
 background: #d05ce8;

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> 

<div id="navbox">
<div class="container" id="navbar">

<ul class="block-menu"><b>
<li ><a href="gifts.html">Gifts Corner</a></li>
<li ><a href="activity.html">Our activities</a></li>
<li ><a href="inspire.html">Inspiration</a></li>
<li ><a href="edu.html">Education</a></li>
<li ><a href="abUS.html">About us</a></li>
</ul></b>
</div>

asked Nov 10 at 13:35

Niyoj oli

165

1

You could just use a media query. Something like @media (min-width: 700px) and put there your .three-d:hover .three-d-box animation if you don't want to use it below that screen width.
– ReSedano
Nov 10 at 14:26

add a comment |

up vote
1
down vote

favorite

$('.block-menu').find('a').each(function()

 var el = $(this),
 elText = el.text();
 
 el.addClass("three-d");
 el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
);

.container 
 width: match-parent;
 padding: 12px ;
 display: flex;
 align-items: center;
 justify-content: center;


a 
 color: #fc0;
 text-decoration:none;


.block-menu 
	width:fit-content; 
 height:fit-content;


.block-menu li 
	display: inline-block;


.block-menu li a 
	color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'Passion One', Arial, sans-serif;
	font-smoothing: antialiased;
	text-transform: uppercase;
	font-family: 'Righteous', cursive;
	overflow: visible;
 width:fit-content;
	height: fit-content;
	font-size: 1.6vw;
	padding: 15px 10px; 
 margin-left:auto;
 margin-right:auto;
 margin-top:1px;
 margin-bottom:1px;

.three-d 
	perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;

	.three-d:hover .three-d-box, 
	.three-d:focus .three-d-box 
		transform: translateZ(-25px) rotateX(90deg);
	

.three-d-box 
	transition: all 0.3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;


.front 
	transform: rotatex(0deg) translatez(25px);


.back 
	transform: rotatex(-90deg) translatez(25px);
	color: #ffe7c4;


.front, .back 
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius:15%;
	background: black;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	box-sizing: border-box;


.back 
 background: #d05ce8;

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> 

<div id="navbox">
<div class="container" id="navbar">

<ul class="block-menu"><b>
<li ><a href="gifts.html">Gifts Corner</a></li>
<li ><a href="activity.html">Our activities</a></li>
<li ><a href="inspire.html">Inspiration</a></li>
<li ><a href="edu.html">Education</a></li>
<li ><a href="abUS.html">About us</a></li>
</ul></b>
</div>

asked Nov 10 at 13:35

Niyoj oli

165

1

You could just use a media query. Something like @media (min-width: 700px) and put there your .three-d:hover .three-d-box animation if you don't want to use it below that screen width.
– ReSedano
Nov 10 at 14:26

add a comment |

up vote
1
down vote

favorite

$('.block-menu').find('a').each(function()

 var el = $(this),
 elText = el.text();
 
 el.addClass("three-d");
 el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
);

.container 
 width: match-parent;
 padding: 12px ;
 display: flex;
 align-items: center;
 justify-content: center;


a 
 color: #fc0;
 text-decoration:none;


.block-menu 
	width:fit-content; 
 height:fit-content;


.block-menu li 
	display: inline-block;


.block-menu li a 
	color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'Passion One', Arial, sans-serif;
	font-smoothing: antialiased;
	text-transform: uppercase;
	font-family: 'Righteous', cursive;
	overflow: visible;
 width:fit-content;
	height: fit-content;
	font-size: 1.6vw;
	padding: 15px 10px; 
 margin-left:auto;
 margin-right:auto;
 margin-top:1px;
 margin-bottom:1px;

.three-d 
	perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;

	.three-d:hover .three-d-box, 
	.three-d:focus .three-d-box 
		transform: translateZ(-25px) rotateX(90deg);
	

.three-d-box 
	transition: all 0.3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;


.front 
	transform: rotatex(0deg) translatez(25px);


.back 
	transform: rotatex(-90deg) translatez(25px);
	color: #ffe7c4;


.front, .back 
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius:15%;
	background: black;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	box-sizing: border-box;


.back 
 background: #d05ce8;

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> 

<div id="navbox">
<div class="container" id="navbar">

<ul class="block-menu"><b>
<li ><a href="gifts.html">Gifts Corner</a></li>
<li ><a href="activity.html">Our activities</a></li>
<li ><a href="inspire.html">Inspiration</a></li>
<li ><a href="edu.html">Education</a></li>
<li ><a href="abUS.html">About us</a></li>
</ul></b>
</div>

asked Nov 10 at 13:35

Niyoj oli

165

$('.block-menu').find('a').each(function()

 var el = $(this),
 elText = el.text();
 
 el.addClass("three-d");
 el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
);

.container 
 width: match-parent;
 padding: 12px ;
 display: flex;
 align-items: center;
 justify-content: center;


a 
 color: #fc0;
 text-decoration:none;


.block-menu 
	width:fit-content; 
 height:fit-content;


.block-menu li 
	display: inline-block;


.block-menu li a 
	color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'Passion One', Arial, sans-serif;
	font-smoothing: antialiased;
	text-transform: uppercase;
	font-family: 'Righteous', cursive;
	overflow: visible;
 width:fit-content;
	height: fit-content;
	font-size: 1.6vw;
	padding: 15px 10px; 
 margin-left:auto;
 margin-right:auto;
 margin-top:1px;
 margin-bottom:1px;

.three-d 
	perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;

	.three-d:hover .three-d-box, 
	.three-d:focus .three-d-box 
		transform: translateZ(-25px) rotateX(90deg);
	

.three-d-box 
	transition: all 0.3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;


.front 
	transform: rotatex(0deg) translatez(25px);


.back 
	transform: rotatex(-90deg) translatez(25px);
	color: #ffe7c4;


.front, .back 
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius:15%;
	background: black;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	box-sizing: border-box;


.back 
 background: #d05ce8;

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> 

<div id="navbox">
<div class="container" id="navbar">

<ul class="block-menu"><b>
<li ><a href="gifts.html">Gifts Corner</a></li>
<li ><a href="activity.html">Our activities</a></li>
<li ><a href="inspire.html">Inspiration</a></li>
<li ><a href="edu.html">Education</a></li>
<li ><a href="abUS.html">About us</a></li>
</ul></b>
</div>

$('.block-menu').find('a').each(function()

 var el = $(this),
 elText = el.text();
 
 el.addClass("three-d");
 el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
);

.container 
 width: match-parent;
 padding: 12px ;
 display: flex;
 align-items: center;
 justify-content: center;


a 
 color: #fc0;
 text-decoration:none;


.block-menu 
	width:fit-content; 
 height:fit-content;


.block-menu li 
	display: inline-block;


.block-menu li a 
	color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'Passion One', Arial, sans-serif;
	font-smoothing: antialiased;
	text-transform: uppercase;
	font-family: 'Righteous', cursive;
	overflow: visible;
 width:fit-content;
	height: fit-content;
	font-size: 1.6vw;
	padding: 15px 10px; 
 margin-left:auto;
 margin-right:auto;
 margin-top:1px;
 margin-bottom:1px;

.three-d 
	perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;

	.three-d:hover .three-d-box, 
	.three-d:focus .three-d-box 
		transform: translateZ(-25px) rotateX(90deg);
	

.three-d-box 
	transition: all 0.3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;


.front 
	transform: rotatex(0deg) translatez(25px);


.back 
	transform: rotatex(-90deg) translatez(25px);
	color: #ffe7c4;


.front, .back 
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius:15%;
	background: black;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	box-sizing: border-box;


.back 
 background: #d05ce8;

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> 

<div id="navbox">
<div class="container" id="navbar">

<ul class="block-menu"><b>
<li ><a href="gifts.html">Gifts Corner</a></li>
<li ><a href="activity.html">Our activities</a></li>
<li ><a href="inspire.html">Inspiration</a></li>
<li ><a href="edu.html">Education</a></li>
<li ><a href="abUS.html">About us</a></li>
</ul></b>
</div>

$('.block-menu').find('a').each(function()

 var el = $(this),
 elText = el.text();
 
 el.addClass("three-d");
 el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
);

.container 
 width: match-parent;
 padding: 12px ;
 display: flex;
 align-items: center;
 justify-content: center;


a 
 color: #fc0;
 text-decoration:none;


.block-menu 
	width:fit-content; 
 height:fit-content;


.block-menu li 
	display: inline-block;


.block-menu li a 
	color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'Passion One', Arial, sans-serif;
	font-smoothing: antialiased;
	text-transform: uppercase;
	font-family: 'Righteous', cursive;
	overflow: visible;
 width:fit-content;
	height: fit-content;
	font-size: 1.6vw;
	padding: 15px 10px; 
 margin-left:auto;
 margin-right:auto;
 margin-top:1px;
 margin-bottom:1px;

.three-d 
	perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;

	.three-d:hover .three-d-box, 
	.three-d:focus .three-d-box 
		transform: translateZ(-25px) rotateX(90deg);
	

.three-d-box 
	transition: all 0.3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;


.front 
	transform: rotatex(0deg) translatez(25px);


.back 
	transform: rotatex(-90deg) translatez(25px);
	color: #ffe7c4;


.front, .back 
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius:15%;
	background: black;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	box-sizing: border-box;


.back 
 background: #d05ce8;

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> 

<div id="navbox">
<div class="container" id="navbar">

<ul class="block-menu"><b>
<li ><a href="gifts.html">Gifts Corner</a></li>
<li ><a href="activity.html">Our activities</a></li>
<li ><a href="inspire.html">Inspiration</a></li>
<li ><a href="edu.html">Education</a></li>
<li ><a href="abUS.html">About us</a></li>
</ul></b>
</div>

javascript css navigationbar

asked Nov 10 at 13:35

Niyoj oli

165

asked Nov 10 at 13:35

Niyoj oli

165

asked Nov 10 at 13:35

Niyoj oli

165

asked Nov 10 at 13:35

Niyoj oli

165

asked Nov 10 at 13:35

Niyoj oli

165

1

You could just use a media query. Something like @media (min-width: 700px) and put there your .three-d:hover .three-d-box animation if you don't want to use it below that screen width.
– ReSedano
Nov 10 at 14:26

add a comment |

1

You could just use a media query. Something like @media (min-width: 700px) and put there your .three-d:hover .three-d-box animation if you don't want to use it below that screen width.
– ReSedano
Nov 10 at 14:26

You could just use a media query. Something like @media (min-width: 700px) and put there your .three-d:hover .three-d-box animation if you don't want to use it below that screen width.
– ReSedano
Nov 10 at 14:26

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239500%2fresponsive-navigation-box%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

active

oldest

votes

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj