HTML/CSS vertical divider with bullets - javascript

I was just wondering how I can obtain this kind of UI design using HTML/CSS:
It should be that every time a user inputs a new data, it'll display the data with a divider and a bullet.
I am new to these kind of UI design in terms of HTML/CSS.

This is pretty darn close.. Only things I can think of are that you will need to tweak the fixed sizes for your font and that it is probably not going to be pretty on a mobile device. https://jsfiddle.net/x6bthxgw/
HTML:
/* CSS: */
body {
font-family: sans-serif;
}
ul.pretty-list {
border-left: 1px solid grey;
padding-left: 16px;
margin-left: 200px;
text-transform: uppercase;
}
ul.pretty-list li {
list-style: none;
}
ul.pretty-list ul {
padding-left: 0px;
}
ul.pretty-list h4 {
color: skyblue;
position: relative;
}
ul.pretty-list .date {
margin-left:-216px;
width:184px;
text-align: right;
padding-right: 1em;
float: left;
position:relative;
}
ul.pretty-list .date:after {
content:"•";
position: absolute;
right:-10px;
width:21px;
font-size:30px;
line-height:18px;
text-align:center;
}
<ul class="pretty-list">
<li>
<h4><div class="date">2015 - Present</div>Item 1</h4>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
<li>
<h4><div class="date">2014 - 2015</div>Item 2</h4>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
</ul>

Try the snippet below. I dont know for certain if is this what you need. This CSS is written on simple logic:
.full-width {
float:left;
width:100%;
display:flex;
}
.first_box {
width:300px;
display:inline-block;
text-align:right;
font-size:15px;
padding-right:15px;
}
.second_box {
width:400px;
display:inline-block;
text-align:left;
padding-left:30px;
font-size:15px;
border-left:2px solid #069;
position:relative;
}
.second_box:after {
content:"";
position:absolute;
left:-8px;
top:8px;
background:#900;
width:15px;
height:15px;
border-radius:50%;
}
.second_box h2 , .first_box h2 {
margin:0;
}
<div class="full-width">
<div class="first_box">
<h2>2015 present</h2>
</div><!-- /.first_box -->
<div class="second_box">
<h2>frontend web Developer</h2>
<p>something here</p>
<p>something here</p>
<p>something here</p>
</div><!-- /.second_box -->
</div><!-- /.full-width -->
<div class="full-width">
<div class="first_box">
<h2>2015 present</h2>
</div><!-- /.first_box -->
<div class="second_box">
<h2>frontend web Developer</h2>
<p>something here</p>
<p>something here</p>
<p>something here</p>
</div><!-- /.second_box -->
</div><!-- /.full-width -->

You can try this. It is a simple structure to follow.
<div class="abc">
<div class="abc3">
<div class="abc2">
2016 - Present
<span class="abc1"></span>
</div>
<div class="abc2">
Front End Developer
</div>
</div>
<div class="abc3">
<div class="abc2"></div>
<div class="abc2"></div>
</div>
</div>
<style>
.abc{
display: table;
background: grey;
width: 350px;
height: 450px;
position: absolute;
left: 250px;
top: 150px;
text-align: center;
}
.abc1{
width: 20px;
display: inline-block;
height: 20px;
position: relative;
right: -42px;
background: red;
z-index: 100;
border-radius: 50%;
}
.abc2 {
display: table-cell;
width: 50%;
border-right: 1px solid blue;
}
.abc3{
display: table-row;
}
</style>

Try using the code below:
<ul>
<li>
<span class="text-left">2015-Present</span>
<span class="bullet"></span>
<span class="text-right">Developer</span>
</li>
<li>
<span class="text-left">2015-Present</span>
<span class="bullet"></span>
<span class="text-right">Developer</span>
</li>
<li>
<span class="text-left">2015-Present</span>
<span class="bullet"></span>
<span class="text-right">Developer</span>
</li>
</ul>
CSS:
ul {
list-style: none;
width: 300px;
}
ul li {
position: relative;
}
ul li span {
width: calc(100%/3);
display: inline-block;
}
ul li:before {
content: '';
position: absolute;
top: 15px;
left: 107px;
height: 90%;
width: 2px;
background: #cccccc;
}
.bullet {
width: 7px;
height: 7px;
display: inline-block;
border-radius: 50%;
background-color: blue;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right
}
Please arrange positions and text according to the requirement.

Just try with the below link: DEMO
<div style="
display: table;
background: yellow;
width: 350px;
height: 450px;
position: absolute;
left: 250px;
top: 150px;
text-align: center;
"><div style="
display: table-row;
"><div style="
display: table-cell;
width: 50%;
border-right: 1px solid blue;
">2015 - Present<span style="
width: 20px;
display: inline-block;
height: 20px;
position: relative;
right: -42px;
background: red;
z-index: 100;
border-radius: 50%;
"></span></div><div style="
display: table-cell;
width: 50%;
border-left: 1px solid blue;
">Front End Developer</div></div><div style="
display: table-row;
"><div style="
display: table-cell;
width: 50%;
border-right: 1px solid blue;
"></div><div style="
display: table-cell;
width: 50%;
border-left: 1px solid blue;
"></div></div></div>

ul li {
display: inline-block;
padding: 5px;
border: 0;
border-right-width: 1px;
border-style: solid;
}
<ul>
<li>
menu1
</li>
<li>
menu2
</li>
<li>
menu3
</li>
</ul>

Related

How can I append only once?

I'm new in jQuery, please help me to fix this case. every time I click it, the link will multiply. how can I stop append function only once, Please help me.
$(".dl-trigger").click(function() {
$("#ChildCat a").each(function() {
var cat = $(this);
$("<a />", {
"href": cat.attr("href"),
"text": cat.text()
}).appendTo("#dlmenu");
});
$("#dlmenu").slideDown("slow");
});
FIDDLE
Use one() method in jQuery, the handler execute once per element.
$(".dl-trigger").one('click', function() {
$("#ChildCat a").each(function() {
var cat = $(this);
$("<a />", {
"href": cat.attr("href"),
"text": cat.text()
}).appendTo("#dlmenu");
});
$("#dlmenu").slideDown("slow");
});
.clear {
clear: both;
float: none;
display: block;
}
.container {
max-width: 990px;
width: 100%;
margin: 0 auto;
}
.inner {
padding: 0px 10px;
}
#main {
margin: 10px auto;
}
.grid-two {
width: 50%;
}
[class*='grid-'] {
float: left;
display: block;
position: relative;
}
#header {
width: 100%;
line-height: 60px;
background: #FFF;
border-top: 4px solid #33AB83;
border-bottom: 1px solid #FEFEFE;
box-shadow: 0px 1px 1px #EEE;
position: relative;
left: -5px;
}
#topmenu {
display: none;
}
span.dl-trigger {
width: 30px;
height: 35px;
line-height: 35px;
text-align: center;
background: #33AB83;
color: #FFF;
padding: 15px 15px;
cursor: pointer;
position: absolute;
top: -4px;
right: -15px;
font-weight: bold;
}
#dlmenu {
width: 100%;
height: 100%;
background: #33AB83;
padding: 0px 15px;
position: relative;
left: -20px;
top: -15px;
display: none;
}
#dlmenu a {
width: 100%;
display: block;
padding: 5px 15px;
margin-left: -15px;
border-top: 1px solid #2a9471;
border-bottom: 1px solid #36b88d;
color: #296d56;
display: block;
text-shadow: 1px 1px 0px #49c39a;
}
#dlmenu a:hover {
background: #3bc094;
}
a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div class="container">
<div class="inner">
<div id="logo" class="grid-two">
<a title="Test Menu" href="http://localhost/">PLEASE CLICK on MENU ICON</a>
</div>
<!-- end of #logo -->
<div id="navigation" class="grid-two">
<span class="dl-trigger button green">☰</span>
<ul id="topmenu">
<li class="ParentCat">
<span><i class="fa fa-navicon" aria-hidden="true"></i> Parent Category</span>
<ul id="ChildCat">
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
</ul>
</li>
</ul>
</div>
<!-- end of #navigation -->
<div class="clear"></div>
</div>
<!-- end of .inner -->
</div>
<!-- end of .container -->
</header>
<!-- end of #header -->
<div id="main">
<div class="wrapper">
<div class="inner">
<div id="dlmenu"></div>
</div>
</div>
</div>
UPDATE :
If you just want to toggle the menu on click, then you can use slideToggle() as #A.Wolff suggested.
$(".dl-trigger").click(function() {
$("#dlmenu").slideToggle("slow");
});
$("#ChildCat a").appendTo("#dlmenu");
.clear {
clear: both;
float: none;
display: block;
}
.container {
max-width: 990px;
width: 100%;
margin: 0 auto;
}
.inner {
padding: 0px 10px;
}
#main {
margin: 10px auto;
}
.grid-two {
width: 50%;
}
[class*='grid-'] {
float: left;
display: block;
position: relative;
}
#header {
width: 100%;
line-height: 60px;
background: #FFF;
border-top: 4px solid #33AB83;
border-bottom: 1px solid #FEFEFE;
box-shadow: 0px 1px 1px #EEE;
position: relative;
left: -5px;
}
#topmenu {
display: none;
}
span.dl-trigger {
width: 30px;
height: 35px;
line-height: 35px;
text-align: center;
background: #33AB83;
color: #FFF;
padding: 15px 15px;
cursor: pointer;
position: absolute;
top: -4px;
right: -15px;
font-weight: bold;
}
#dlmenu {
width: 100%;
height: 100%;
background: #33AB83;
padding: 0px 15px;
position: relative;
left: -20px;
top: -15px;
display: none;
}
#dlmenu a {
width: 100%;
display: block;
padding: 5px 15px;
margin-left: -15px;
border-top: 1px solid #2a9471;
border-bottom: 1px solid #36b88d;
color: #296d56;
display: block;
text-shadow: 1px 1px 0px #49c39a;
}
#dlmenu a:hover {
background: #3bc094;
}
a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div class="container">
<div class="inner">
<div id="logo" class="grid-two">
<a title="Test Menu" href="http://localhost/">PLEASE CLICK on MENU ICON</a>
</div>
<!-- end of #logo -->
<div id="navigation" class="grid-two">
<span class="dl-trigger button green">☰</span>
<ul id="topmenu">
<li class="ParentCat">
<span><i class="fa fa-navicon" aria-hidden="true"></i> Parent Category</span>
<ul id="ChildCat">
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
</ul>
</li>
</ul>
</div>
<!-- end of #navigation -->
<div class="clear"></div>
</div>
<!-- end of .inner -->
</div>
<!-- end of .container -->
</header>
<!-- end of #header -->
<div id="main">
<div class="wrapper">
<div class="inner">
<div id="dlmenu"></div>
</div>
</div>
</div>

Change Side Nav Bar on window size change

I am trying to make a side nav for a website. So far I am using a <nav> element and filling it with <li> to create my side bar.
So far my code is below (p.s in-line styling is just for testing, I will be using an external css file later on):
<body>
<nav style="background: #3f9edd; height: 1000px; min-width: 200px; position:fixed;">
<li style="position: relative; display: block; background: #2ecc71; width: 100%; height: 10%; padding: 33px 25px;">Home Area</li>
<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item one</li>
<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item two</li>
<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item three</li>
<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item four</li>
<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item five</li>
</nav>
<div class="container" ng-controller="projectController">
</div>
</body>
The above code outputs the following:
Whats my issue!
I am trying to change the side nav bar if the user resizes their window or maybe they access the site from a iPad or iPhone etc.
If the screen is full-size display this (I am already displaying this)
But if the screen size goes below a certain size the nav bar automatically changes to:
I am not sure how to develop this functionality. Can anyone guide me in the right direction. If you need any more information please let me know.
Thanks in advance.
Heres a pretty crude example with pure css but could be used as a base, you could add transitions ect to the breakpoint as well to make it look snazzier
Codepen http://codepen.io/noobskie/pen/XmeXEo?editors=110
HTML
<nav role='navigation'>
<ul>
<li><i class="fa fa-chrome"></i><span>Home</span></li>
<li><i class="fa fa-chrome"></i><span>About</span></li>
<li><i class="fa fa-chrome"></i><span>Clients</span></li>
<li><i class="fa fa-chrome"></i><span>Contact Us</span></li>
</ul>
</nav>
CSS
body{
margin:0;
}
nav{
background:#2F404F;
height: 100vh;
width:auto;
position:fixed;
ul{
margin:0;
padding:0;
}
li{
position: relative;
display: block;
padding:20px 10px;
border-bottom:1px solid #000;
a{
color:#FFF;
text-decoration:none;
font-size:1.3em;
i{
padding:0 5px 0 0;
}
}
}
}
#media only screen and (max-width: 768px) {
span{
display:none;
}
}
Have two different spans in your li.
<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;"><span class="showLarge">Large vieport</span><span class="showTablet">Tablet vieport</span></li>
By default:
.showTablet {
display: none;
}
For tablet viewports:
#media only screen and (max-width: 768px) {
.showLarge {
display: none;
}
.showTablet {
display: block;
}
}

jQuery .slideToggle() not working

I am trying to build a mobile friendly navigation for my website and I want to use a menu that slides down after pressing the menu link. I thought it would be pretty simple but it isn't working. When I click the link "Menu" nothing happens. It should reveal a menu using the .slideToggle feature of jQuery. If you could offer a fix or an alternative method to making a responsive and mobile friendly menu.
<script>
$(document).ready(function(){
$("#burger").click(function(){
$("#menu").slideToggle();
});
});
</script>
<!-- END OF SCRIPTS -->
<!-- HEADER -->
<header>
<div id="top">
<img src="root/logo.png">
<div id="burger">
<a>Menu</a>
</div>
</div>
<nav id="navbar">
<ul id="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
</header>
<!-- END HEADER -->
</body>
</head>
This is my CSS:
/* HEADER */
header {
width: 100%;
background-color: #012d5a;
height: 150px;
}
#top {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#top img{
height: 110px;
margin-left: 0px;
}
#navbar {
width: 100%;
height: 40px;
background-color: #B9E0F6;
display: block;
color: #000;
font-family: helvetica;
font-size: 16px;
font-weight: 600;
}
#menu {
display: block;
width: 600px;
margin: auto;
height: 40px;
}
#menu li {
float: left;
width: 120px;
display: inline;
padding-top: 10px;
height: 40px;
border-right: 2px solid #000;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align: center;
}
#menu li:last-child {
border-right: 0;
}
#burger {
display: none;
float: right;
}
/* Responsive Menu */
#media only screen and (max-device-width: 767px) {
/* define mobile specific styles here */
#burger {
display: block;
}
#navbar {
height: auto;
position: relative;
z-index: 1;
}
#menu {
display: none;
height: 200px;
width: 100%;
}
#menu li {
display: block;
float: none;
width: 50%;
border: none;
margin: auto;
}
#top {
width: 100%;
}
}
Your menu is hidden in the CSS, try this instead:
$("#burger").click(function(){
$("#navbar").slideToggle();
});
/* HEADER */
header {
width: 100%;
background-color: #012d5a;
height: 150px;
}
#top {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#top img{
height: 110px;
margin-left: 0px;
}
#navbar {
width: 100%;
height: 40px;
background-color: #B9E0F6;
display: block;
color: #000;
font-family: helvetica;
font-size: 16px;
font-weight: 600;
}
#menu {
display: block;
width: 600px;
margin: auto;
height: 40px;
}
#menu li {
float: left;
width: 120px;
display: inline;
padding-top: 10px;
height: 40px;
border-right: 2px solid #000;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align: center;
}
#menu li:last-child {
border-right: 0;
}
#burger {
float: right;
color: #B9E0F6;
margin-top: 24px;
font-size: 24px;
cursor: pointer;
text-decoration: underline;
}
/* Responsive Menu */
#media only screen and (max-device-width: 767px) {
/* define mobile specific styles here */
#burger {
display: inline-block;
}
#navbar {
height: auto;
position: relative;
z-index: 1;
}
#menu {
display: none;
height: 200px;
width: 100%;
}
#menu li {
display: block;
float: none;
width: 50%;
border: none;
margin: auto;
}
#top {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<!-- Scripts Here -->
<script type = "text/javascript" src="script/jquery-2.1.4.min.js"></script>
<script type = "text/javascript" src="script/bootstrap.min.js"></script>
<!-- END OF SCRIPTS -->
<!-- HEADER -->
<header>
<div id="top">
<div style="display:inline-block">
<img src="http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png" />
</div>
<div id="burger">
<a>Menu</a>
</div>
</div>
<nav id="navbar">
<ul id="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
</header>
<!-- END HEADER -->

How to highlight anchor link when target div comes in view in jQuery?

I have a webpage like the following layout;
The HTML is;
<div class="header" style="text-align: center">Demo</div>
<div class="navi">
<div class="title">
Options
</div>
</div>
<div class="content">
<div class="da">
diva
divb
divc
divd
</div>
<div class="db">
<div style="width: 300px; height: 300px; background-color: #996633"><a id="diva" name="diva">DIV1</a></div>
<div style="width: 300px; height: 300px; background-color: #CC0066"><a id="divb" name="divb">DIV2</a></div>
<div style="width: 300px; height: 300px; background-color: #3300FF"><a id="divc" name="divc">DIV3</a></div>
<div style="width: 300px; height: 300px; background-color: #99CC00"><a id="divd" name="divd">DIV4</a></div>
</div>
</div>
<div class="footer"> </div>
and CSS is;
html, body, div, h2, img, ul, li, form, time {
margin: 0;
padding: 0;
border: 0;
}
html, body {
position: absolute;
height: 100%;
width: 100%;
min-width: 800px;
}
.header{
height: 40px;
color: #FFF;
background-color: #666666;
}
.title{
display: block;
float: left;
margin-top: 4px;
margin-left: 10px;
}
.content{
margin-bottom: 36px;
}
.footer{
height: 30px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: solid 1px #CCCCCC;
background: #FFFFFF;
}
.da,.db{
position: absolute;
z-index: 0;
top: 82px;
bottom: 30px;
}
.da{
width: 200px;
border-right: solid 1px #CCCCCC;
overflow: visible !important;
}
.da a{
font-family: Tahoma;
display: block;
padding: 10px;
text-decoration: none;
color: #555;
}
.da a:hover{
background-color: #DDD;
}
.da .current,.da .current:hover{
background-color: #FF6600;
}
.db{
left: 200px;
right: 0;
background-color: #CC99FF;
overflow: scroll;
overflow-x:hidden;
}
The links of sidebar are anchored to 4 cascaded divs. They are linked to divs and when I click on links, the corresponding div will scroll up. This worked fine. But I tried to achieve something different. The link of current visible div may be given orange background color, so that when user scrolls the page, the orange color will shift from one link to another, according to the current div on page. After some googling and research, I found this SO question useful jQuery changing css on navigation when div # scrolls into view. A demo of the solution is available in this fiddle which is exactly what I want.
But when I tried to implement this solution in my layout, it is not working, ie, links are not highlighting to corresponding div.
Here is my fiddle.
How can I implement the same in my layout?
Try this:
CSS:
.da,.db{
position: relative; // changed to relative. Because of absolute your document height is affected.
z-index: 0;
top: 82px;
bottom: 30px;
}
.db{
left: 142px;
top:42px;
right: 0;
background-color: #CC99FF;
overflow: scroll;
overflow-x:hidden;
}
jQuery:
$('.da a').removeClass('current').eq(i).addClass('current'); // replaced selected with current which you are using.
DEMO
I couldn't wrap my head around some of these answers, but I found this really simple idea.
It's basically saying that the mouse will be in view at some position on the screen, and if it is within a specific div, highlight the matching link.
HTML
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="nav">
<span id ="menu">☰</span>
<ul id="top-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
<div id="wrapper">
<div id="one" class="container">
one
</div>
<div id="two" class="container">
two
</div>
<div id="three" class="container">
three
</div>
<div id="four" class="container">
four
</div>
<div id="five" class="container">
five
</div>
<div id="six" class="container">
six
</div>
</div>
CSS
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: Geneva, Tahoma, Verdana, sans-serif;
margin: 0px;
}
.nav{
width: 100%;
height: 50px;
background: rgba(200,200,200,0.2);
position: fixed;
top: 0px;
}
#menu{
float: right;
font-size: 40px;
font-weight: normal;
padding-right: 20px;
color: rgba(100,100,100,0.9);;
}
.nav ul{
width: 150px;
list-style-type: none;
background: rgba(200,200,200,0.2);
border-radius: 5px;
}
#top-menu{
clear: both;
display: block;
float: right;
padding-left: 0px;
margin-top: 10px;
margin-right: 20px;
}
.links{
color: black;
font-size: 20px;
font-weight: normal;
}
.nav ul li a{
text-decoration: none;
text-align: center;
display: block;
padding: 2px 0px 2px 10px;
}
.nav ul li a:hover{
color: #fff;
background-color: black;
border-left: thick solid red;
}
#wrapper{
margin-top: 50px;
}
.container{
width: 800px;
height: 600px;
margin: 0px auto;
background: rgba(200,200,200,0.2);
border-bottom: 1px solid rgba(200,200,200,1);
padding: 20px;
}
.active{
color: white;
background-color: rgba(100,100,100,1);
border-left: thick solid rgba(0,255,0,0.5);
}
jQuery
$(document).ready(function(){
$("div").mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('active');
$("[href=#"+id+"]").addClass('active');
});
});
Source

jquery div doesn't show when toggle is closed

I seem to be having a weird problem with the responsive CSS and the JQuery
When the window is resized to 600px
The hr(icon) is clicked to show Nav
Once hr is clicked again to hide the nav, and the window is resized, the nav isn't visible
if nav is visible and then resized > 600px nav stays visible throughout.
Is the problem something to do with the jquery code?
CODE HERE: https://jsfiddle.net/ag3tdeqe/
HTML:
<div class="container">
<div class="leftmenu">
<div class="logo">
<img src="http://callmenick.com/theme/callmenick/img/logo.svg" alt="" />
</div>
<div class="icon">
<hr/>
<hr/>
<hr/>
</div>
<div class="social">
<span class="fa fa-facebook"></span>
<span class="fa fa-instagram"></span>
<span class="fa fa-twitter"></span>
<span class="fa fa-youtube"></span>
<span class="fa fa-vine"></span>
<span class="fa fa-tumblr"></span>
<span class="fa fa-google-plus"></span>
<span class="fa fa-linkedin"></span>
</div>
<div class="nav">
<ul class="navigation">
<li> <a class="scroll" href="#home">Home</a>
</li>
<li> <a class="scroll" href="#videos">Videos</a>
</li>
<li> <a class="scroll" href="#gallery">Gallery</a>
</li>
<li> <a class="scroll" href="#about">About</a>
</li>
<li> <a class="scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
html, body {
margin:0 auto;
height: 100%;
}
.container {
margin-left: 250px;
height: 100%;
}
.leftmenu {
float:left;
width:250px;
margin-left: -250px;
background-color: #28aadc;
position: fixed;
height: 100%;
overflow: auto;
}
.logo {
display: block;
width: 60px;
text-align: center;
margin:0 auto;
margin-top: 30px;
margin-bottom: 0px;
height: 60px;
-webkit-transition: .3s;
transition: transform .3s;
}
.leftmenu .nav {
position: relative;
height: auto;
padding-bottom: 60px;
margin-top: -30px;
}
.leftmenu .nav ul {
height: auto;
width: auto;
text-align: center;
}
.leftmenu .nav ul li {
width: 100%;
}
.leftmenu .nav ul li > a {
text-align: center;
margin:0 auto;
margin-top: 15px;
width:80%;
display: block;
text-decoration: none;
color:#00648c;
font-family:'arkhip';
font-size: 15px;
padding:5px;
}
.leftmenu .nav ul li > a:hover {
color:white;
}
#media screen and (max-width:767px) {
.container {
margin-left: 0px;
}
.leftmenu {
width: 100%;
margin-left: 0px;
float:none;
position:relative;
height:80px;
}
.leftmenu > h1 {
font-size: 80%;
}
.leftmenu .nav {
display: block;
width: 90%;
padding:0px;
margin-top: -35px;
margin-right: 10px;
}
.leftmenu .logo {
margin:0 auto;
margin-top: 10px;
margin-left: 20px;
float:left;
}
.leftmenu .nav ul li {
width:100px;
display: inline-block;
}
.leftmenu .nav ul li > a {
width:20px;
margin:0 auto;
}
}
#media screen and (max-width:600px) {
.leftmenu {
max-height: 80px;
overflow: visible;
margin-top: -10px;
}
.icon {
display: block;
width: 30px;
float: right;
margin:0 auto;
padding:5px 10px 5px 10px;
margin-right: 30px;
margin-top: 20px;
}
.icon hr {
width:40px;
border:2px solid white;
margin:0 auto;
}
.icon hr:not(:nth-of-type(1)) {
margin-top: 10px;
}
.icon:hover {
cursor: pointer;
}
.leftmenu .nav {
display: none;
position: absolute;
left:0px;
right:0px;
float:none;
margin:0 auto;
width: 95%;
margin-bottom: 10px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.6);
top:80px;
padding-top: 10px;
background-color: white;
border-bottom: 1px solid #28aadc;
border-left: 1px solid #28aadc;
border-right: 1px solid #28aadc
}
.leftmenu .nav ul li {
display: block;
margin:0 auto;
}
.leftmenu .nav ul li:hover a {
color:black;
}
}
JQUERY:
$(".icon").click(function() {
$(".leftmenu .nav").toggle();
});
$(".leftmenu .nav ul li > a").click(function() {
$(".icon:visible").click();
});
The line
$(".leftmenu .nav").toggle();
adds
display: none
to your menu after the second click on the icon to hide it.
Use the following to remove it:
$(window).resize(function() {
$(".leftmenu .nav").css("display", "");
});
To trigger an event handler remotely, you use trigger().
$('.icon:visible').trigger('click');

Categories