So for My navbar I want to let my arrow rotate 180 degrees when clicked, although I have tried many things with CSS or JavaScript, I don't know what is the most efficient way to go about this. The icon I chose is imported from font-awesome.
I tried implementing javascript to get it done, didn't figure it out yet. Should CSS do the trick or do am I doing something majorly wrong here?
const acc = document.getElementsByClassName("switch");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
this.classList.toggle("iconUp");
});
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600;626&display=swap');
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
align-items:center;
gap:1rem;
}
.switchIconRotate {
transform-origin: center;
transition: all 0.2s linear;
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: #4EC843;
border-radius:34px;
border:none;
color: white;
width:130px;
height:35px;
font-family:"Open Sans", sans-serif;
font-weight:600px;
font-size:14px;
}
#Demobutton:hover {
background-color: #20D62C;
transition:800ms;
}
#Navbarline {
width:80%;
border-width:1.5px;
opacity:15%;
}
<header>
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<img class="logo" src="images/logo_image.svg" alt="logo"> <!-- Svg needs to work -->
<nav> <!-- Navigation menu -->
<ul class="Nav_links">
<li><a class="switch" href="#">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></a></li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>
I added a tiny js script and 2 css class. Also changed the icon to an arrow so you can see it moving.
document.querySelector('#Demobutton').addEventListener("click",
(e)=>{
document.querySelector('header .logo').classList.toggle('rotate');
}, false)
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600;626&display=swap');
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
align-items:center;
gap:1rem;
}
.switchIconRotate {
transform-origin: center;
transition: all 0.2s linear;
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: #4EC843;
border-radius:34px;
border:none;
color: white;
width:130px;
height:35px;
font-family:"Open Sans", sans-serif;
font-weight:600px;
font-size:14px;
}
#Demobutton:hover {
background-color: #20D62C;
transition:800ms;
}
#Navbarline {
width:80%;
border-width:1.5px;
opacity:15%;
}
/*my code*/
img.logo {
transition: transform 1s ease-in;
}
img.logo.rotate {
transform: rotate(360deg);
}
<header>
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<img class="logo" src="https://uxwing.com/wp-content/themes/uxwing/download/02-arrow-direction/arrow-left.svg" alt="logo"> <!-- Svg needs to work -->
<nav> <!-- Navigation menu -->
<ul class="Nav_links">
<li><a class="switch" href="#">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></a></li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>
Related
i have created a navigation that navigates back and forth between sections. I have styled two lists that are supposed to fulfill this task.
List: the active link works there as soon as I click a link. The text and the point are unfortunately upside down. When I change the order, the list name / Nav remains in the visible area
List: there the point and the name are arranged correctly but the active link cannot be combined somehow.
In both examples, the active link does not remain open. I've been trying it out for a long time and I'm a bit overwhelmed.
$('#menu li a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:rgba(255,255,255,.5);
border-right:1px solid #e5e5e5;
position:fixed;
top:0;
bottom:0;
height:100%;
right:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#999;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
.active{
background-color:#f30;
}
section {
height: 100vh;
color: rgba(255,255,255, .5);
font-size: 20vh;
}
section:nth-child(odd) {
background: blue
}
section:nth-child(even) {
background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="nav" class="area"></div><nav class="main-menu">
<ul id="menu">
<li class="active">
<a href="#slide01" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 1
</span>
</a>
</li>
<li class="has-subnav">
<a href="#slide02" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 2
</span>
</a>
</li>
<li class="has-subnav">
<a href="#slide03" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 3
</span>
</a>
</ul>
</nav>
<section id="slide01">Section 1</section>
<section id="slide02">Section 2 </section>
<section id="slide03">Section 3</section>
</body>
</html>
h2 {
text-align: center;
font-size: 3em !important;
}
#nav {
position: fixed;
height: 100%;
right: 0;
z-index: 1;
top: 0;
background: rgba(255, 255, 255, .5);
padding: 5px;
box-shadow: 0 0 6px #555;
}
.list-group-item {
background-color: rgba(0,0,0,0) !important;
border: none !important;
font-size: 2em;
}
.list-group-item a, .list-group-item a:hover {
color: #fff;
text-decoration: none;
}
.inner {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.inner a, .inner a:hover {
color: #fff;
text-decoration: none;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
section {
height: 100vh;
color: rgba(255,255,255, .5);
font-size: 20vh;
}
section:nth-child(odd) {
background: blue
}
section:nth-child(even) {
background: red
}
.test {
padding: 0 15px !important;
}
.test:hover .later {
display: block;
text-align: right;
}
.test:hover .before {
display: none;
}
.test .later {
display: none;
z-index: 100;
}
.test .before {
display: block;
z-index: 50;
text-align: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section id="slide01">Section 1</section>
<section id="slide02">Section 2 </section>
<section id="slide03">Section 3</section>
<section id="slide04">Section 4</section>
<section id="slide05">Section 5</section>
<nav id="nav">
<div class="inner">
<ul class="list-group">
<li class="list-group-item"><a href="#slide01">
<div class="test"><span class="before"> •</span><span class="later">Nav 1 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide02">
<div class="test"><span class="before"> •</span><span class="later">Nav 2 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide03">
<div class="test"><span class="before"> •</span><span class="later">Nav 3 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide04">
<div class="test"><span class="before"> •</span><span class="later">Nav 4 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide05">
<div class="test"><span class="before"> •</span><span class="later">Nav 5 •</span></a></div>
</li>
</ul>
</div>
</nav>
-> Active status
The second example does not have an element with ID "menu," so your JavaScript isn't targeting anything. For the second example specifically:
Change your jQuery to
$('.list-group-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
This will properly apply the "active" class to your list-group-item when clicked.
However, the other issue is that ".active" won't do anything right now because you are overriding Bootstrap's built-in styles with this rule:
.list-group-item {
background-color: rgba(0,0,0,0) !important;
border: none !important;
font-size: 2em;
}
The !important on background-color is keeping the color the same even when ".active" is applied.
Instead of using !important, you could increase the specificity of your rule by writing it like so:
.list-group .list-group-item {
background-color: rgba(0,0,0,0);
border: none !important;
font-size: 2em;
}
However I'm not sure what you mean by "In both examples, the active link does not remain open." Your ".active" class currently only applies a background color to the active link (both in the way you've written it in example 1 and the way Bootstrap styles it in example 2) and this is what we fixed with the code above. If you want more styling applied to the active link, it will need to be added.
I got a little codepen where you can select multiple tabs (with jQuery selectable widget). I wanna do the following: If no item got the class name .ui-selected the input #plannername gets disabled.
I thought something like this should work:
if ($('.ui-selected').length === 0){
$('#plannername').prop('disabled', true);
}
else{
$('#plannername').prop('disabled', false);
}
But that doesn't work. I created the following:
var count = $('.ui-selected').length;
console.log(count);
That's giving me the correct amount of tabs selected.
$(function() {
// define one function, to be used for both select/unselect
function selectionChange(event, ui) {
// Get indexes of selected items in an array
var items = $('.ui-selected', this).map(function () {
return $(this).index();
}).get();
// Show or hide sections according to the corresponding option's selection
$("section").each(function () {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
console.log(items);
var count = $('.ui-selected').length;
console.log(count);
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
});
$(function(){
$('#plannerform').submit(function(e){
var val = $(this).find('#plannername').val();
$('ul.plannerlist:visible').append('<li>' + val + '</li>');
e.preventDefault();
$('#plannername').val('');
});
});
*{
font-family: 'Josefin Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#selectable .ui-selecting {
background: #9eefbc;
transition:.8s ease-in-out;
-webkit-transition: -webkit-transform 0.8s, background-color 0.8s;
transition: transform 0.8s, background-color 0.8s;
-webkit-transform: perspective(300px) rotate3d(1,0,0,-180deg);
transform: perspective(300px) rotate3d(1,0,0,-180deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-perspective-origin: 50% 100%;
perspective-origin: 50% 100%;
}
#selectable .ui-selected {
background: #6dce91;
transition:all 0.8s;
}
#selectable {
list-style-type: none;
position:absolute;
width: 60%;
margin-left:20%;
display:flex;
transition:.3s ease-in-out;
z-index:1;
margin-top:3px;
}
#selectable li {
background:#ddffea;
padding: 0.6em;
font-size: 1.4em;
flex-grow:1;
transition:.3s ease-in-out;
border:none;
text-align:center;
line-height:0.8em;
}
#selectable .ui-selected:after,
#selectable .ui-selected::after {
position: absolute;
top: 44px;
margin-left:-50px;
transition: .2s ease-in-out;
content: '';
width: 0;
height: 0;
opacity:1;
animation:dreieckFade 1s forwards;
border-top: solid 15px #6dce91;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
}
#keyframes dreieckFade{
0%{opacity:0;border-top: solid 0px #6dce91;}
100%{opacity:1;border-top: solid 15px #6dce91;}
}
.ui-selectable-helper {
visibility: hidden;
}
#content{
width:60%;
background-color:#9eefbc;
margin-left:20%;
padding-top:70px;
margin-top:3px;
padding-bottom:30px;
}
.tabcontent{
top:44px;
background-color:transparent;
z-index:0;
transition:.3s ease-in-out;
font-size:2em;
display:none;
padding-left:100px;
}
#plannername{
width:40%;
background-color:#9eefbc;
margin-left:20%;
border:0;
font-size:2em;
padding:20px;
}
#plannername:focus{
outline:0;
}
#plannersubmit{
width:20%;
background-color:#6dce91;
border:0;
font-size:2em;
padding:20px;
transition:.2s ease-in-out;
}
#plannersubmit:hover{
transition:.2s ease-in-out;
padding-left:40px;
cursor:pointer;
}
#plannersubmit:focus{
outline:0;
}
#plannersubmit:active{
color:white;
}
.plannerlist{
list-style-type:none;
}
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form id="plannerform">
<input id="plannername" placeholder="insert name" type="text" autocomplete="off"></input><!--
--><input id="plannersubmit" type="submit" value="sign up"></input>
</form>
<ol id="selectable">
<li class="ui-widget-content">FR PM</li>
<li class="ui-widget-content">SA AM</li>
<li class="ui-widget-content">SA PM</li>
<li class="ui-widget-content">SO AM</li>
<li class="ui-widget-content">SO PM</li>
<li class="ui-widget-content">MO AM</li>
</ol>
<div id="content">
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
</div>
What you need to do is remove the disabled flag once the action of clicking one of the options has taken place. Essentially, what you should do is set the field to disabled by default, then enable it once a selection has been made:
$(function() {
$('#plannername').prop('disabled', true);
function selectionChange(event, ui) {
('#plannername').prop('disabled', false);
}
}
I've created an updated CodePen showcasing this here.
Hope this helps! :)
i would create this Navigation.
i have try some things with css and js.
but it works not on every browser and i think the code is dirty.
the driangle of the navigation-hover is center of the length. the transparent driangle is lay under the blue driangle and the body of the Subnavigation (or undernavigation) is flexible in width.
have you some ideas to create this navigation clean? and possibly without JS?
i hope you can help me. i have spend so much hours and it does nt correct work.
yours, yellow
$( ".active" ).mouseover(function() {
var xbreite = this.offsetWidth;
//Breite von nav-sub
var ybreite = this.nextElementSibling.offsetWidth;
var zbreite = ybreite - xbreite;
var xb = xbreite/2;
xb = xb - 23;
var zb = ybreite - xb;
xb = xb+"px";
zb = zb+"px";
// console.log(this.nextElementSibling.firstElementChild.firstElementChild);
//div rest -> aber bekomme kein element und style unter gebracht
var rest = this.nextElementSibling.firstElementChild.firstElementChild;
rest.style.width=xb;
var eck = this.nextElementSibling.firstElementChild.lastElementChild;
eck.style.width=zb;
//Subnav sichtbar machen
// this.nextElementSibling.style.top='59px';
this.nextElementSibling.style.visibility='visible';
});
//Subnavi schließen
$( ".nav-sub" ).mouseleave(function() {
var navsubs = $('.nav-sub');
var subsCount = $(navsubs).length;
for( hilf = 0; hilf < subsCount; hilf++){
//navsubs[hilf].style.top='-9999999px';
navsubs[hilf].style.visibility='hidden';}
});
.bcg{
position:absolute;
z-index:2;
}
.header{
position:fixed;
height:84px;
z-index:10;
background-color:#579dd3;
opacity: 0.75;
width:100%;
z-index: 100;
}
.logo{
float:left;
padding-left:1.875em;
padding-top:0.938em;
}
.nav{
float:left;
}
/* Navigation Primär */
.nav-prim{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
position:absolute;
right:1.64em;
bottom: -1.2em;
font-size:17px;
text-transform:uppercase;
z-index:999;
}
/* Dreieck Navigation Primär */
.nav-prim ul li a {
position: relative;
}
.nav-prim ul li a:hover::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/*Aktiver Link */
.nav-prim .active{
position: relative;
}
.nav-prim .active::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/* Ende Dreieck Navigation Primär */
.nav-prim ul li{
float:left;
list-style:none;
padding-left:0.7em;
padding-right:0.7em;
/* position: relative; */
}
.nav-prim ul li:last-child{
padding-right:0;
}
.nav-prim ul li a{
text-decoration:none;
color:white;
height:56px;
display:block;
}
/* Subnavigation */
.nav-sub{
position:absolute;
color:blue;
padding:0;
margin:0;
z-index:11111;
visibility:hidden;
top: 59px;
/*
display:none;*/
}
.nav-sub li{
clear:both;
padding:0 !important;
margin:0;
background-color:white;
width:100%;
}
.nav-sub li:first-child{
background-color:transparent;
padding:0;
margin:0;
}
.nav-sub .eck{
background-image:url('http://mattgelb.canopus.uberspace.de/nav_bg_active.png');
background-repeat:no-repeat;
height:25px;
float:left;
}
.nav-sub .rest{
background-color:white;
height:25px;
width:30%;float:left;
}
.nav-sub a{
color:blue !important;
text-transform:none;
}
.nav-sub a:hover{
color:red !important;
background-image:none !important;
}
.nav-sub a:hover::after{
border:0 !important;
background-image:none !important;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<img class="bcg" src="http://www.jessicajonesdesign.com/downloads/lines-wallpaper-orange.gif">
<div class="header">
<div class="logo">
<img width="60" src="https://davidwalsh.name/demo/codepenLogo.png">
</div>
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
</div>
Hi You can use something like this
The HTML
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest">
<div class="eck"></div>
</div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"><div class="eck"></div></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
And some css
body
{
background-color : #eeeeee;
}
div.nav ul
{
list-style-type : none;
}
div.nav ul li
{
font-family: Arial, Haettenschweiler, "Arial Narrow Bold", sans-serif;
color:black;
float: left;
padding: 10px;
vertical-align: middle;
text-transform:uppercase;
position : relative;
background-color : #0000ff;
}
div.nav a
{
color:black;
}
div.nav li ul
{
display: none;
position : absolute;
top : 100%;
left : -40px;
padding-top : 5px;
}
div.nav li:hover ul
{
display: block;
position: absolute;
z-index: 999;
}
div.nav li:hover li
{
float:none;
padding: 0;
text-align:left;
}
div.nav li:hover li a
{
min-width: 150px;
display:block;
}
.rest {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
margin-left : 10px;
position : relative;
}
.eck {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0000ff;
margin-left : 10px;
position : absolute;
top : -25px;
left : -30px;
z-index : 999;
}
You can also view the fiddle here https://jsfiddle.net/x8x2L93u/
I'm making a responsive menu following this guide http://demos.inspirationalpixels.com/responsive-menu/ everything's working fine when the width is less than 980px, the menu (the three dash) is showing but not opening.
What am I doing wrong? Can anyone tell me?
It's not working on my website:
Here's my HTML Code
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
body {
margin: 0;
padding: 0;
background-image: url("img-bg-mobile.jpg");
background-repeat: no-repeat;
font-family: open sans;
}
.toggle-nav {
display: none;
}
#media screen and (min-width: 1000px) {
nav {
height: auto;
width:auto;
margin-left:17%;
}
nav ul{
list-style: none;
margin:0px;
padding:0px;
}
nav ul li {
float: left;
margin: 2%;
}
nav ul li a{
transition:all linear 0.15s;
text-decoration: none;
font-family: open sans;
color: white;
font-size: 1.5em;
text-align: center;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
}
nav ul li ul a {
color: #ff3c1f;
}
nav ul li:hover ul
{
display:block;
height:auto;
width: 110px;
position:absolute;
margin:0;
}
}
#media screen and (max-width: 980px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul.active {
display:none;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
font-size:20px;
transition:color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
article {
clear: both;
font-family: open sans;
font-size: 1em;
}
article p {
color: white;
margin-left: 10%;
margin-right: 10%;
}
footer {
color: white;
margin-left: 10%;
margin-right: 10%;
}
.arrow {
font-size: 11px;
margin-left: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Yoo Free Recharge App That gives talktime for trying out cool appps">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" maximum-scale=2.0">
<title>Yoo Get Free Recharge</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- header start from here-->
<header>
<nav class="menu">
<ul class="active">
<li class=logo>
<img class=yoologo src="yoosmall.png" title="Yoo Get Free Recharge">
</li>
<li class="mainmenu">
HOME
</li>
<li class="mainmenu">
ADVERTISE
</li>
<li id="mainmenu" class="sub-menu">
WHO WE ARE<span class="arrow">▼</span>
<ul>
<li>About Us</li>
<li>Vision</li>
<li>Team</li>
</ul>
</li>
<li class="mainmenu">
PRICING
</li>
<li class="mainmenu">
CONTACT
</li>
</ul>
<a class="toggle-nav" href="#">☰</a>
</nav>
</header>
<article>
<p>Yoo Free Recharge App - Yoo is an app that gives free recharge/talktime for trying out new and cool apps you can also refer your friends and get money for that too you can get upto 125Rs. Per Friend Download Now</p>
</article>
<footer>
<div style="font-family:'open sans';" > © Yoo Infotech. All right reserved. </div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
You left this out of your css
#media screen and (max-width: 980px) {
....
.menu ul {
width: 100%;
position: absolute;
top: 120%;
left: 0px;
padding: 10px 18px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
border-radius: 3px;
background: #303030;
}
...
}
You can use some framework like bootstrap or material design
http://getbootstrap.com/components/#navbar-default
http://www.getmdl.io/components/index.html#layout-section
I followed this tutorial and made my responsive header menu
Here it is
What I want to do something like this bad example, I tried by CSS3 but field to change the picture, at least I made everything in jQuery, but no animation or something wrong, actually I don't know, here is my Attempt BY CSS3.
Here is my code
#maged{
width:198px; /*140px * 5*/
height:591px;
background-color:#0C9;
position: absolute;
overflow:hidden;
top: 14px;
left: 41px;
position: relative;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity:1;
filter:alpha(opacity=100);
}
#maged:hover {
opacity:0;
filter:alpha(opacity=0);
-moz-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
-webkit-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
background-color:#36F;
}
#cc_item img{
position:absolute;
width:195px;
height:591px;
top:-562px;
left:54px;
}
#cc_title{
color:#fff;
line-height:46px;
font-size:30px;
top:472px;
left:59px;
position:absolute;
background:#272727;
width:167px;
display:block;
z-index:11;
}
-->
</style>
<script type="text/javascript">
$(function(evt) {
$("#maged").click(function() {
alert("loool");
$("#cc_item").slideDown("slow");
$("#cc_title").fadeIn("slow");
return false;
});
});
</script>
</head>
<body>
<div id="maged"></div>
<div id="cc_title">Main page</div>
<div id="cc_item" style="z-index:5;">
<img src="img30000.jpg" alt="" />
</div>
</body>
</html>
This solution is very CSS heavy, as I wanted to focus on making the HTML cleaner and making sure the general effect worked (though to a lesser degree) when JavaScript is off.
To my knowledge, there's no CSS3 per se, though the CSS may seem advanced. (it's not!)
The most important point for me what that those images really aren't content so I don't think you need to use <img> elements for them; instead use CSS background images... but to animate those background images easily I did have to use a jQuery plugin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>javascript - Help in jQuery animation</title>
<style type="text/css">
<!--
body {
background:url(http://osc4.template-help.com/wt_32608/images/bg.gif);
text-align:center;
}
ul#menu {
background:#171717;
margin:auto;
overflow:hidden;
width:985px;
list-style:none;
padding:0px;
}
ul#menu li {
list-style:none;
background:transparent;
float:left;
text-align:center;
width:195px;
height:591px;
padding:0px;
position:relative;
border:1px solid #FFFFFF;
}
ul#menu li a {
text-decoration:none;
color:#FFFFFF;
display:block;
background:transparent;
height:591px;
width:195px;
position:relative;
}
ul#menu li a .menu-text {
background:#272727;
width:167px;
font-size:30px;
font-family:Arial,Helvetica,sans-serif;
font-variant:small-caps;
position:absolute;
top:224px;
left:14px;
}
ul#menu li a .menu-text .title {
line-height:46px;
}
ul#menu li a .description {
display:none;
font-size:smaller;
text-align:left;
line-height:auto;
}
ul#menu li a:hover .menu-text {
top:auto;
width:195px;
height:152px;
left:0px;
bottom:0px;
}
body.javascript-enabled ul#menu li a:hover .menu-text {
top:224px;
bottom:auto;
width:167px;
height:auto;
left:14px;
}
ul#menu li a:hover .description {
display:block;
padding-left:30px;
}
body.javascript-enabled ul#menu li a:hover .description {
display:none;
}
ul#menu #main-page a {
background:url(http://osc4.template-help.com/wt_32608/images/img1.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #about-us a {
background:url(http://osc4.template-help.com/wt_32608/images/img2.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #services a {
background:url(http://osc4.template-help.com/wt_32608/images/img3.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #partners a {
background:url(http://osc4.template-help.com/wt_32608/images/img4.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #locations a {
background:url(http://osc4.template-help.com/wt_32608/images/img5.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #main-page a:hover {
background-position:top center;
}
ul#menu #about-us a:hover {
background-position:top center;
}
ul#menu #services a:hover {
background-position:top center;
}
ul#menu #partners a:hover {
background-position:top center;
}
ul#menu #locations a:hover {
background-position:top center;
}
body.javascript-enabled ul#menu #main-page a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #about-us a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #services a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #partners a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #locations a:hover {
background-position:center -1000px;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://plugins.jquery.com/files/jquery.backgroundPosition.js_7.txt" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("body").addClass("javascript-enabled");
$("ul#menu li a")
.css({backgroundPosition: '0px -591px'})
.mouseenter(function() {
$(this).find(".menu-text").hide();
$(this)
.stop().animate({backgroundPosition: '0px 0px'}, 500, function() {
$(this).css({backgroundPosition: '0px 0px'});
$(this).find(".description").css({display:'block'});
$(this).find(".menu-text").css({top:'auto',width:'195px',height:'152px',left:'0px',bottom:'0px'}).fadeIn('slow');
});
})
.mouseleave(function() {
$(this).find(".menu-text").hide();
$(this)
.stop().animate({backgroundPosition: '0px -591px'}, 250, function() {
$(this).css({backgroundPosition: '0px -591px'});
$(this).find(".description").css({display:''});
$(this).find(".menu-text").css({top:'',width:'',height:'',left:'',bottom:''}).fadeIn('slow');
});
})
});
//]]>
</script>
</head>
<body>
<ul id="menu">
<li id="main-page">
<span class="menu-text"><span class="title">Main page</span> <span class="description">Welcome to our site</span></span>
</li>
<li id="about-us">
<span class="menu-text"><span class="title">About us</span> <span class="description">Who we are</span></span>
</li>
<li id="services">
<span class="menu-text"><span class="title">Services</span> <span class="description">& solutions</span></span>
</li>
<li id="partners">
<span class="menu-text"><span class="title">Partners</span> <span class="description">Partners list</span></span>
</li>
<li id="locations">
<span class="menu-text"><span class="title">Locations</span> <span class="description">Our contacts</span></span>
</li>
</ul>
</body>
</html>
Heres my solution to your problem without using css3. It´s all in the 1.html file, jquery and images are poiting to external sources, so you can just run it. Hope this can help you :)
<html>
<head>
<style>
#container{
overflow: hidden;
width: 800px;
height: 600px;
border: 1px solid black;
cursor: pointer;
}
.maged{
width:200px;
height:600px;
float:left;
display: none;
}
.cc_item{
text-align:center;
width:200px;
height:600px;
background:#171717;
float:left;
}
span.cc_title{
color:#fff;
line-height:46px;
font-size:30px;
margin: 250px 10px 0px;
float: left;
background:#272727;
width:180px;
z-index:11;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(evt) {
$(".cc_item").hover(function() {
$(this).find(".maged").stop(true,true).slideDown(300);
$(this).find(".cc_title").fadeOut("slow");
},function(){
$(this).find(".maged").stop(true,true).slideUp(300);
$(this).find(".cc_title").fadeIn("slow");
});
});
</script>
</head>
<body>
<div id="container">
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.hintmag.com/blog/uploaded_images/richardnicoll08-711189.jpg" alt="" />
</div>
<span class="cc_title">Main page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.hintmag.com/blog/uploaded_images/brunopieters05-717446.jpg" alt="" />
</div>
<span class="cc_title">Second page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.delhierro.ca/wp-content/uploads/2010/11/Fashion-Studio-01S.jpg" alt="" />
</div>
<span class="cc_title">Third page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://lockdownmodels.files.wordpress.com/2009/05/kell-1.jpg?w=200&h=600" alt="" />
</div>
<span class="cc_title">Fourth page</span>
</div>
</div>
</body>
</html>