First Output : https://ibb.co/k2RJ1m6
What i need to achieve : https://ibb.co/86nhB6m
The Page Content is the X Mark and the toolbar. But instead of being outside like the 2nd Image, it is getting included inside the Sidebar. Here's the Code
<body>
<div class="wrapper">
<nav id="sidebar">
<!-- <script src="C-NavigationBar.js"></script> -->
</nav>
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="navbar-btn">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
</div>
</div>
</body>
I make style for your output so when you add the style in your code it will work like your second image.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
#sidebar{
background-color:#000;
width:230px;
height:100vh;
float:left;
}
#content{
float:left;
width:calc(100% - 230px);
padding: 10px;
}
.navbar-btn span:first-child {
width: 26px;
height: 2px;
background: #000;
display: block;
transform: rotate(45deg);
margin: 0 auto;
}
.navbar-btn span:last-child {
width: 26px;
height: 2px;
background: #000;
display: block;
transform: rotate(-45deg);
margin: 0 auto;
}
.navbar-btn {
width: 40px;
height: 40px;
border: none;
text-align: center;
}
</style>
Related
$(".menu").click(function () {
if ('.pagelinks').style.display = 'none';
{
$('.pagelinks').style.display = 'block';
}
else
{
$('.pagelinks').style.display = 'none';
}
})
html,body
{
margin:0;
width: 100%;
overflow:hidden;
box-sizing: border-box;
height: 100%;
}
body
{
background: url(best8.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
header
{
width: 100%;
background-color: black;
height: 85px;
position: fixed;
}
.heading1
{
color:white;
position: relative;
align-content: center;
margin: 3em ;
top: 100px;
left: 675px;
}
.logo img
{
left: 0;
filter: brightness 100%;
position: fixed;
}
.menu
{
margin: auto;
margin-left: 75%;
display: block;
position: fixed;
top: 11px;
}
.nav div
{
height: 5px;
background-color: white;
margin: 4px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav
{
width: 30px;
display: block;
margin: 1em 0 0
}
.one
{
width: 30px;
}
.two
{
width: 20px;
}
.three
{
width: 25px;
}
.nav:hover div
{
width: 30px;
}
.pagelinks
{
margin: auto;
margin-left: 49%;
position: fixed;
top: -10px;
display: none;
}
.pagelinks ul
{
list-style-type: none;
}
.pagelinks ul li
{
float: left;
padding:30px;
margin: auto;
transition: 0.3;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
opacity: 0.6;
}
.pagelinks ul li:hover
{
color: green;
transition: 0.6s;
}
.logo img:hover
{
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title>Goesta Calculators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://use.typekit.net/axs3axn.js"></script>
<script>try{Typekit.load({ async: true});}catch(e){}</script>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="main.js" type="text/javascript"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="NewLogo.PNG" >
<div class="menu">
<a href="" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</a>
</div>
<nav class="pagelinks">
<ul>
<li>About</li>
<li>Contact</li>
<li>Calculators</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="heading1">
<h1>Estimate. Plan your future.</h1>
</div>
</body>
</html>
I'm trying to make an unordered list show/hide when another div with .menu class, is clicked. I've tried several different ways in javascript from research online but nothing is working. I also want it to transition slowly and smoothly. When I click the menu (I'm assuming because its a link) the page seems to refresh.
First, your condition syntax is very wrong.
if ('.pagelinks').style.display = 'none';
Don't put semicolon in there. And wrap your condition with open and close parenthesis.
Second, use .css() if you want to modify your css.
Here's the working version of your jQuery
$(".menu").click(function () {
if ($('.pagelinks').css("display") == 'none')
{
$('.pagelinks').css("display", "block");
}
else
{
$('.pagelinks').css("display", "none");
}
})
Also, don't use anchor tag on your nav if it is only a trigger. Use <div> instead.
Like this
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
And if you have problem with the cursor not transforming into a hand, just have this in your css
.nav:hover
{
cursor: pointer;
}
Working Sandbox of your code HERE
I managed to have the div containing the expanded menu, covering the whole view (with 100vh). I noted that the cool animation, while it is expanding itself, is working only till the end of the li content (last menu link), then the speed increases or simply the animation stops working and the navbar-collapse finally reach the end of the view port, but not in a nice way.
Do you know why? Is it a bootstrap javascript functionality? Do you know how to fix it?
I copied the code in this fiddle
body {
padding-top: 53px;
}
.pids-navbar{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 99999;
}
.pids-navbar-toggle .pids-icon-bar {
display: block;
width: 16px;
height: 1px;
border-radius: 1px;
}
.pids-navbar-toggle {
margin-top: 14px;
margin-bottom: 14px;
margin-right: 0px;
float: left;
}
.pids-navbar-nav {
margin: 0px -15px;
font-weight: lighter;
}
.pids-navbar-collapse {
border: 0px;
height: calc(100vh - 60px);
}
.full-height {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-static-top pids-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pids-navbar-toggle" data-toggle="collapse" data-target="#pids-bs-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar pids-icon-bar"></span>
<span class="icon-bar pids-icon-bar"></span>
<span class="icon-bar pids-icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse pids-navbar-collapse" id="pids-bs-navbar">
<ul class="nav navbar-nav pids-navbar-nav full-height">
<li class="active">
Home 1
</li>
<li class="">
Home 2
</li>
<li class="">
Home 3
</li>
</ul>
</div>
</div>
</nav>
Thanks!
I had exactly the same problem and what worked for me is to set the height of the ul to 100vh, not the height of the whole navbar-collapse. See code:
.navbar-collapse ul {
height: 100vh;
}
note: I am using bootstrap 4.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.wrap {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="wrap">
Home
Home 1
Home 2
Home 3
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>
I've just started to get into jQuery, so I apologise for the bad coding in advance. I just recognised that whenever I scroll a bit down so that just a bit of the jQuery image slider is visible on the top of the page, it scrolls me automatically back to top when the jQuery image slider changes the picture. But when I am as far down on the page that the slider isn't visible at all or when I barely scroll down so that the most part of the slider is still on the screen, it doesn't scroll me back to top.
I would appreciate any help since I am not able to find the issue.
Thanks in advance.
$('#back_to_top').click(function()
{
$('html, body').animate({scrollTop: 0});
return false;
});
// Nav bar drop down code
$('#deals_a').hover(function(){
$('#deals_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#deals_dropdown').is(':hover')){
$('#deals').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#deals_dropdown').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
};
$('#services_a').hover(function(){
$('#services_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#services_dropdown').is(':hover')){
$('#services').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#services_dropdown').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
};
// Slider button code
$('.slider_button').hover(function(){
$('.slider_button').removeClass('active_button');
$(this).addClass('active_button');
$('.slide').hide();
$($('#slider').children()[$(this).index()]).show();
});
// Slider code
$(document).ready(function(){
// Set options
var speed = 500; // Fade speed
var autoswitch_speed = 4000; // Auto slider speed
var myInterval = setInterval(nextSlide, autoswitch_speed);
// Add initial active class
$('.slide').first().addClass('active');
// Hide all slides
$('.slide').hide();
// Show first slide
$('.active').show();
// show the first node
($($('#slider_button_container').children()[0])).addClass('active_button');
var counter = 1;
// Switch to next slide
function nextSlide(){
clearInterval(myInterval);
$('.slider_button').removeClass('active_button');
($($('#slider_button_container').children()[counter - 1])).removeClass('active_button');
($($('#slider_button_container').children()[counter])).addClass('active_button');
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
($($('#slider_button_container').children()[3])).removeClass('active_button');
($($('#slider_button_container').children()[0])).addClass('active_button');
counter = 0;
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
counter = (counter + 1) % 4;
myInterval = setInterval(nextSlide, autoswitch_speed);
}
});
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
header{
width: 100%;
height: 600px;
text-align: center;
}
#nav_menu{
height: 98px;
display: inline-block;
border-bottom: 2px solid #FFF;
padding: 0 20px 0 20px;
position: relative;
z-index: 2;
}
.nav_menu_items{
float: left;
margin: 10px;
padding-bottom: 10px;
width:auto;
line-height: 80px;
}
.nav_menu_items a{
text-decoration: none;
color: #FFF;
font-size: 20px;
font-weight: bold;
position: relative;
font-family: 'Exo 2', sans-serif;
font-style: italic;
}
.nav_menu_sup:hover::after{
content: "\25B2";
position: absolute;
left: 40%;
top: 14px;
}
#back_to_top, #back_to_top img{
position: fixed;
width: 50px;
height: 50px;
right: 50px;
bottom: 50px;
display:block;
}
.dropdown{
display:none;
height: auto;
width: auto;
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
position: absolute;
background: #FFF;
top:100px;
line-height: 20px;
list-style-type: none;
}
.color_1{
background: #4BB7BE;
}
.color_2{
background: #2A7287;
}
.dropdown li{
padding: 10px;
;
}
.dropdown li:hover{
}
.dropdown li a{
color: #FFF;
}
.dropdown li a:hover{
color: #FFA;
}
#slider{
position: relative;
width: 100%;
height: 100%;
margin-top: -105px;
z-index: 1;
overflow: hidden;
}
.slide img{
height: 600px;
}
.darkening_layer{
width: 100%;
height: 600px;
position: absolute;
background: rgba(0, 0, 0, 0.2);
}
#slider_button_container{
position: relative;
display: inline-block;
top: -50px;
z-index: 2;
}
.slider_button{
height: 18px;
width: 18px;
border-radius: 50%;
border: 3px solid #FFF;
float: left;
z-index: 100;
margin-left: 10px;
cursor: pointer;
position: relative;
display: block;
}
.slider_button:hover{
background: #FFF;
}
.active_button{
background: #FFF;
}
#first_slider_button{
}
#welcome{
background: #007DCC;
width: 100%;
height: 400px;
}
#advertise{
background: #004E7F;
width: 100%;
height: 400px;
}
footer{
width: 100%;
height: 400px;
background-color: #007DCC;
}
.clear{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sea Kozmetik ve Güzellik</title>
<link rel="stylesheet" style="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Exo+2" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="nav_menu">
<div id="home" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ANASAYFA</a>
</div>
<div id="about" class="nav_menu_items">
<a class="nav_menu_sup" href="#">HAKKIMIZDA</a>
</div>
<div id="deals" class="nav_menu_items">
<a class="nav_menu_sup" id="deals_a" href="#">KAMPANYALAR</a>
<ul id="deals_dropdown" class="dropdown">
<li class="color_1">Öğrenci Kampanyaları</li>
<li class="color_2">Epilasyon Kampanyaları</li>
<li class="color_1">Cilt Bakımı Kampanyaları</li>
</ul>
</div>
<div id="services" class="nav_menu_items">
<a class="nav_menu_sup" id="services_a" href="#">HİZMETLERİMİZ</a>
<ul id="services_dropdown" class="dropdown">
<li class="color_1">Cilt Bakımı</li>
<li class="color_2">Depilasyon</li>
<li class="color_1">Epilasyon</li>
<li class="color_2">Manikür</li>
<li class="color_1">Pedikür</li>
<li class="color_2">Tırnak Bakımı</li>
<li class="color_1">Kaş Tasarımı</li>
<li class="color_2">Makyaj</li>
</ul>
</div>
<div id="products" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ÜRÜNLERİMİZ</a>
</div>
<div id="gallery" class="nav_menu_items">
<a class="nav_menu_sup" href="#">GALERİ</a>
</div>
<div id="contact" class="nav_menu_items">
<a class="nav_menu_sup" href="#">İLETİŞİM</a>
</div>
</div>
<!-- Picture size must be 1519px x 600px -->
<div id="slider">
<div id="first_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_7.jpg" alt="">
</div>
<div id="second_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_8.jpg" alt="">
</div>
<div id="third_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_9.jpg" alt="">
</div>
<div id="fourth_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_10.jpg" alt="">
</div>
</div>
<div id="slider_button_container">
<div id="first_slider_button" class="slider_button"></div>
<div id="second_slider_button" class="slider_button"></div>
<div id="third_slider_button" class="slider_button"></div>
<div id="fourth_slider_button" class="slider_button"></div>
<div class="clear"></div>
</div>
</header>
<div id="back_to_top">
<img src="images/arrow_up.png" alt="back to top">
</div>
<section id="welcome">
</section>
<section id="advertise">
</section>
<footer>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>
I'm trying to code a site just to learn but i can't get something to work on my site togheter with all the other elments but if i code that part alone it works. I'm talking about a bottom navigation bar or "Filter". I want it to slide down if i press on "x" but it doesn't and in the browser console i get this message "Uncaught ReferenceError: closeNav is not defined" and "Uncaught ReferenceError: openNav is not defined"
Here's the code (it's pretty messy):
function openNav() {
document.getElementById("myFilterTab").style.height = "100px";
}
function closeNav() {
document.getElementById("myFilterTab").style.height = "0%";
}
body {
margin:0;
background-color: white;
color: #a5a5af;
font: 12px/1.4em Arial,sans-serif;
}
#header {
position: relative;
background-color: #77c9d4;
color: #FFF;
height: 11.3%;
}
#header input{
position:absolute;
top: 20px;
padding: 5px 9px;
height: 30px;
margin-left: 700px;
width: 600px;
border: 1px solid #a4c3ca;
background: #FFFFFF;
border-radius: 6px 0px 0px 6px;
}
.SearchBar{
color:black;
}
.SearchBar:focus{
outline:0;
color:black;
}
.SearchButton{
position:absolute;
padding:6px 15px;
left:1300px;
bottom:64px;
border: 1px solid #57BC90;
background-color:#57BC90;
color:#fafafa;
border-radius: 0px 6px 6px 0px;
}
.SearchButton:active{
outline:0;
}
.SearchButton:hover{
background-color:#015249;
border-color: #015249;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 15px;
color:white;
}
ul {
position:relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #57BC90;
}
li {
border-right:1px solid #57BC90;
float:left;
}
#NavBar{
width:455.76px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.Login{
float:right;
text-decoration: none;
}
li a:hover{
color:white;
text-decoration:none;
}
li a:hover:not(.active) {
background-color: #015249;
}
.active {
background-color: #015249;
}
br.clearLeft {
clear: left;
}
* {
margin: 0;
}
.glyphicon-log-in{
right: 4px !important;
}
.openBox{
position:absolute;
width: 50px;
background-color: #57BC90;
top: -24px;
left:926px;
cursor:pointer;
}
.glyphicon-chevron-right{
transform: rotate(-90deg);
font-size:20px;
color:white;
right: -13px;
top: 3px;
}
.glyphicon-remove{
position:absolute;
left: 1865px;
top: 13px;
font-size:20px;
color:white;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
.footer{
background-color:#77c9d4;
}
.ShowBox{
padding:1px;
border: 1px solid gray;
height:108px;
width: 192px;
}
.FilterTab{
transition: 0.5s;
position: fixed;
height: 100px;
width: 100%;
padding: 1px;
background-color: #57BC90;
bottom: 0px;
border-radius: 20px 20px 0px 0px;
}
#media screen and (max-height: 450px) {
.FilterTab {padding-top: 15px;}
.FilterTab a {font-size: 18px;}
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
<!DOCTYPE html>
<html>
<head>
<title>PC Master</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="ScrollBar.css">
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
</head>
<body>
<div id="header">
<div id="logo">PC Master</div>
<form method="get">
<input class="SearchBar" type="text" name="search" placeholder="Cauta.." required>
<button type="submit" Value="submit" class="SearchButton"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul>
<li>Home</li>
<li>Componente</li>
<li>Periferice</li>
<li>Contact</li>
<li class="Login"><span class="glyphicon glyphicon-log-in" ></span>Login</li>
</ul>
<br class="clearLeft" />
</div>
<div class="FilterTab" id="myFilterTab">
</span>
<div class="openBox"><span class="glyphicon glyphicon-chevron-right" onclick='openNav()'></span></div>
</div>
<div class='wrapper'>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class='push'></div>
</div>
<div class='footer' id="logo">PC Master</div>
</body>
</html>
The site is only for full hd monitor so in smaller monitors it won't look ok.
JavaScript is not a stylesheet
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
use a script tag like all of the other includes in the page
<script src="ScrollBar.js"></script>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
How do I do that? This is what I have so far:
<!DOCTYPE HTML>
<html>
<style>
#charset 'UTF-8';
#import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600");
body {
background: #fff;
}
body,
input,
textarea,
select {
font-family: 'Source Sans Pro', sans-serif;
font-size: 19pt;
font-weight: 300;
line-height: 1.75em;
color: #888;
}
}
header {
margin: 0 0 2em 0;
}
header > p {
margin: 1em 0 0 0;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #E27689;
border-bottom-color: rgba(255, 255, 255, 0);
}
.image.avatar48 img {
width: 70px;
height: 60px;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 375px;
height: 100%;
color: #fff;
background: #222629;
box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.1);
text-align: right;
}
#logo {
position: relative;
margin: 1.75em 1.5em 1.5em 1.5em;
min-height: 48px;
cursor: default;
}
#logo h1 {
position: relative;
color: #fff;
font-weight: 600;
font-size: 1em;
line-height: 1em;
}
#logo p {
position: relative;
display: block;
font-size: 0.6em;
color: rgba(255, 255, 255, 0.5);
line-height: 1.25em;
margin: 0.5em 0 0 0;
}
#logo .image {
position: absolute;
left: 0;
top: 0;
}
#nav ul li a {
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#main > section {
margin: 0;
overflow: hidden;
padding: 0;
text-align: center;
position: absolute;
top: 30%;
left: 50%;
}
.portfolio {
position: relative top: 20%;
left: 50%;
visibility: hidden
}
</style>
<head>
<title>Ryan H</title>
</head>
<body>
<div id="header" class="skel-layers-fixed">
<div class="top">
<!-- Logo -->
<div id="logo">
<span class="image avatar48"><img src="http://i.imgur.com/r3HkBkB.jpg" alt="" /></span>
<h1 id="title">Ryan Ho</h1>
<p>13 years old</p>
</div>
<nav id="nav">
<ul>
<li><span class="icon fa-home">Intro</span>
</li>
<li><span class="icon fa-user">About Me</span>
</li>
<li><span class="icon fa-user">Stuff</span>
</li>
</ul>
</nav>
</div>
</div>
<!-- Main -->
<div id="main">
<!-- Intro -->
<section id="top" class="one dark cover">
<div class="container">
<header>
<h2 class="alt">I am Ryan H.</h2>
</header>
</div>
</section>
<!-- About Me -->
<section id="about" class="two">
<div class="container">
<header>
<h2>About Me</h2>
</header>
<p>Site In Progress</p>
</div>
</section>
<section id="portfolio" class="three">
<div class="container">
<header>
<h2>Stuff</h2>
</header>
<p>This is where I would put my stuff, if I had any.</p>
</div>
</section>
</div>
</body>
</html>
Would I have to use jQuery or Javascript? If so, what is it? I am stuck.
Using jQuery...
http://jsfiddle.net/v6kxc2uk/
<div id="1" style="display: none;">some text</div>
<div id="2" >some more text</div>
<button linkto="1">1</button>
<button linkto="2">2</button>
$('button').on('click', function(){
$('div').hide();
$('div#'+$(this).attr('linkTo')).show();
});