i built a navigation bar for my website.this code is brought from another site. it's css here
* {
padding:0;
margin:0;
}
body {
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
background-color:#FFF
}
header {
width:100%;
background-color:#06C;
z-index:1000;
}
.menu-bar {
color:#FFF;
font-size:26px;
cursor:pointer;
padding:10px 12px;
margin-left:10px;
margin-top:5px;
margin-bottom:5px;
}
.menu-bar:hover {
background-color:rgba(0, 0, 0, 0.1);
border-radius:50px;
}
#tag-menu {
display:none;
}
#tag-menu:checked ~ div.drawer {
animation: slide-in 0.5s ease;
animation-fill-mode: forwards;
}
.drawer {
position:fixed;
left:-280px;
background-color:#06C;
height:100%;
z-index:100;
width:200px;
animation: slide-out 0.5s ease;
animation-fill-mode: forwards;
}
.drawer ul li {
list-style:none;
}
.drawer ul li a {
padding:10px 30px;
text-decoration:none;
display:block;
color:#FFF;
border-top:1px solid #039;
}
.drawer ul li a:hover{
background-color:rgba(0, 0, 0, 0.1);
}
.drawer ul li a i {
width:50px;
height:35px;
text-align:center;
padding-top:15px;
}
#keyframes slide-in {
from {left: -280px;}
to {left: 0;}
}
#keyframes slide-out {
from {left: 0;}
to {left: -280px;}
}
it's HTML here
<header>
<input type="checkbox" id="tag-menu">
<label class="fa fa-bars menu-bar" for="tag-menu"></label>
<div class="drawer" id="drawer">
<nav class="overlay-menu">
<ul>
<li><i class="fa fa-user-secret"></i>A</li>
<li><i class="fa fa-check-circle-o"></i>B</li>
<li><i class="fa fa-user-circle"></i>C</li>
<li><i class="fa fa-info-circle "></i>D</li>
</ul>
</nav>
</div>
My problem is that the navigation bar drawer menu doesn't close after clicking on menu item. i need to close the drawer after click any item on the drawer menu. how to solve this problem. what are the scripts which i can use?. Your help is highly appreciated.Thanks
Demo is here: http://androidcss.com/demos/css/css-drawer-menu/#
I simplified the code a little bit because:
so you can have more flexibility later on when you want to add other things.
your nav menu will be closed from the start, not after 1 second like in the previous code used.
58 lines of code instead of 125
It will also give you an introduction opportunity to jQuery.
Please see the comments that explain each line of code and write a comment if you don't understand something.
Codepen to play with: https://codepen.io/larrytherabbit/pen/NWrGMWE
$("#hamburger").click(function(){
$("nav").toggleClass('open', 'close');
});
$("a").click(function(){
$("nav").toggleClass('open', 'close');
});
header, nav {
background-color:#06C;font-family:'Open Sans';
}
header {
width:100%;display:flex;align-items:center;
height:80px;color:#FFF;justify-content:flex-start;
} /* we use flex display to position the hamburger icon on the side of the AndroiCSS h2 element */
#hamburger {
cursor:pointer;
} /* add the small hand cursor pointer to indicate this element is clickable; it triggers the jQuery on click */
header * {
margin:0 15px;
}
.fa-bars, header h2 {
font-size:28px!important;
}
header h2 {
font-weight:400!important;
}
nav {
display:flex;flex-direction:column;width:0;align-items:center;
transition:width 0.2s ease;
}
nav.open {
width:250px;
}
nav.close {
width:0;
}
nav * {
color:#FFF!important;font-family:'Open Sans';font-size:20px!important;margin-right:15px;
}
nav a {
text-decoration:none!important;
border-top:0.5px solid gray;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;height:55px;
}
nav a:hover {
background-color:rgba(0, 0, 0, 0.1);
} /* this changes the bg color on hover over the nav element */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css drawer menu demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <!-- this loads the font aswesome library for the hamburger icon (fa-bars) and the social icons; the class 'fa' calls the font awesome library and the fa-xxx class calls the specific icon needed-->
<header>
<i id="hamburger" class="fa fa-bars"></i>
<h2>AndroidCSS</h2>
</header>
<nav>
<i class="fa fa-facebook"></i> <span>Facebook</span> <!-- nav menu no need for <ul> or <li> tags here -->
<!-- the <a> tags are link tags and the <i> tags are used to call font awesome icons again -->
<i class="fa fa-facebook"></i><span>Facebook</span>
<i class="fa fa-facebook"></i><span>Facebook</span>
<i class="fa fa-facebook"></i><span>Facebook</span>
<i class="fa fa-facebook"></i><span>Facebook</span>
</nav>
Related
How can I solve the problem of a Side-Menu that doesn't slide out-and-in from the left (Leftward)? I got it from YouTube Video. Backtrack to the YouTube presenter without feedback.
It consists of HTML, CSS and JavaScript.
Index File
The Index file is the file invokes or synchronize with CSS file and JavaScript files
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="toggleMenu.css" type="text/css" rel="stylesheet">
<script link="toggleMenu.js"></script>
</head>
<body>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS File:
The CSS file defines various class with defined attributes
* {
margin:0px;
padding:0px;
font-family: sans-serif;
}
#sidebar {
position:fixed;
width:200px;
height:100%;
background:#151719;
left:-200px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:rgba(230, 230, 230, 0.9);
list-style:none;
padding:15px 10px;
border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}
#sidebar .toggle-btn {
position:absolute;
left:230px;
top:20px;
}
#sidebar .toggle-btn span {
display: block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
JavaScript
JavaScript handling the sliding effect when user click on the Toggle Button (toggle-btn)
function toggleSidebar() {
document.getElementByID("sidebar").classlist.toggle("active");
}
You have a couple of typos in your toggle function, it should be:
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
}
Here's a working version, click on run snippet below:
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
}
* {
margin:0px;
padding:0px;
font-family: sans-serif;
}
#sidebar {
position:fixed;
width:200px;
height:100%;
background:#151719;
left:-200px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:rgba(230, 230, 230, 0.9);
list-style:none;
padding:15px 10px;
border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}
#sidebar .toggle-btn {
position:absolute;
left:230px;
top:20px;
}
#sidebar .toggle-btn span {
display: block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
There are 2 points you need to fix
script should be using src attributes instead of link, so it will be
<script src="toggleMenu.js"></script>
And the classList should be written with capital L, so instead of document.getElementById("sidebar").classlist.toggle("active"); it
should be
document.getElementById("sidebar").classList.toggle("active");
https://codepen.io/divided7/pen/PoPrwPe I made you a codepen, with the fixed result.
Also, change link to src in your code for the script tag, and the typo (classlist to classList)
I need to make a chevron rotate 180deg when clicking on its parent element to indicate whether a section is expanded or collapsed to an existing (non-bootstrap) accordion.
Currently all sections are defaulted to display expanded (green). When the .BlackTitleExp_top_style div is clicked the header section closes and the divs bg-color turns a light green to indicate the section is collapsed.
Ideally, when the header turns grey, the chevron should also rotate 180deg so that is is pointing down indicating the section is closed.
Ideally I'd like to accomplish by clicking on BlackTitleExp_top_style parent element but I'm not married to this idea. Any suggestions would be greatly appreciated.
$(document).ready(function() {
var BTE_top = $(".BlackTitleExp_top_style");
var BTE_top_BG = "BlackTitleExp_top_style_BG";
$(BTE_top).click(function() {
var el = $(this);
el.not(el).removeClass(BTE_top_BG);
el.toggleClass(BTE_top_BG);
});
});
.BlackTitleExp_top_style {
cursor: pointer;
background-color: rgba(92, 132, 92, 0.35);
border-radius: 5px;
position: relative;
padding: 15px;
margin-bottom: 10px;
}
.BlackTitleExp_top_style_BG {
transition: all 300ms ease;
cursor: pointer;
background-color: rgba(128, 128, 128, 0.35);
}
.chevron {
position: absolute;
right: 20px;
}
.rotate {
transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<!-- HTML -->
<div class="wrapper">
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
</div>
Define the states that an element(s) can exist in (ex. rotated 180o/0o, expanded/collapsed,
on/off etc) then declare the condition(s) (ex. if (fart) { smell.it }) or event(s) (ex. click, hover, etc) that can occur to invoke a behavior(s) (ex. rotate, expand, do your taxes, etc). In the demo below the adding/removing of a class (.fa-rotate-180) sets the styles on each <i>.
The class .fa-rotate-180 is a Font Awesome class that will rotate any of its icons 180o when applied. CSS animation is added as well via transform: rotate(), transition, and #keyframes
Details commented in demo
// Start with all content hidden
$('.content').hide();
// When header.title is clicked...
$('.title').on('click', function(event) {
// Reference the p.content that follows the clicked header✱
const clickedContent = $(this).next('.content');
// Reference the i.chevron that is nested within clicked header
const clickedChevron = $(this).find('.chevron');
/* Slide up all p.content with the exception of the sibling p.content that follows
the clicked header✱ */
$('.content').not(clickedContent).slideUp('fast');
// Expand/Collapse the p.content of the clicked header✱
clickedContent.slideToggle('fast');
/* Remove .fa-rotate-180 class from all i.chevron with the exception of the
i.chevron nested within clicked header */
$('.chevron').not(clickedChevron).removeClass('fa-rotate-180');
/* Add/Remove .fa-rotate-180 class to/from the i.chevron nested within the
clicked header */
clickedChevron.toggleClass('fa-rotate-180');
});
/* ✱ The expand/collapse aspect of code is not required by OP question and
is only added to provide a complete functional example. */
:root {
font: 16px/1.2 Arial;
}
.title {
font-size: 1.3rem;
cursor: pointer
}
.chevron {
/* block or inline-block for smoother animation */
display: inline-block;
/* Animation when going back to collapsed state */
transform: rotate(0deg);
transition: 0.3s;
}
.fa-rotate-180 {
/* This declares the keyframes used for animation */
animation: spin;
transition: 0.4s
}
/* An #rule used to breakdown animation into steps */
#keyframes spin {
100% {
transform: rotate(180deg);
}
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'>
<aside class='read-more'>
<header class='title'>
<i class="fas fa-chevron-up chevron"></i> Chevron rotates 180<sup>o</sup>...
</header>
<p class='content'>...when header is clicked</p>
</aside>
<aside class='read-more'>
<header class='title'>
<i class="fas fa-chevron-up chevron"></i> Chevron rotates 180<sup>o</sup>...
</header>
<p class='content'>...when header is clicked</p>
</aside>
<aside class='read-more'>
<header class='title'>
<i class="fas fa-chevron-up chevron"></i> Chevron rotates 180<sup>o</sup>...
</header>
<p class='content'>...when header is clicked</p>
</aside>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Try this
BTE_top.click(function() {
var el = $(this);
var icon = el.find('i');
if(!icon.hasClass('rotate')){
icon.addClass('rotate');
}
el.not(el).removeClass(BTE_top_BG);
el.toggleClass(BTE_top_BG);
});
You are very close. Just adding this little bit of CSS will get you what you want:
.chevron {
position: absolute;
right: 20px;
transition: all 300ms ease;
}
.BlackTitleExp_top_style_BG .chevron {
transform: rotate(180deg);
}
Now when the BlackTitleExp_top_style_BG is added, the chevrons transform property is updated. With a transition now defined on chevron the rest of your code works as expected.
$(document).ready(function() {
var BTE_top = $(".BlackTitleExp_top_style");
var BTE_top_BG = "BlackTitleExp_top_style_BG";
$(BTE_top).click(function() {
var el = $(this);
el.not(el).removeClass(BTE_top_BG);
el.toggleClass(BTE_top_BG);
});
});
.BlackTitleExp_top_style {
cursor: pointer;
background-color: rgba(92, 132, 92, 0.35);
border-radius: 5px;
position: relative;
padding: 15px;
margin-bottom: 10px;
}
.BlackTitleExp_top_style_BG {
transition: all 300ms ease;
cursor: pointer;
background-color: rgba(128, 128, 128, 0.35);
}
.chevron {
position: absolute;
right: 20px;
transition: all 300ms ease;
}
.BlackTitleExp_top_style_BG .chevron {
transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<!-- HTML -->
<div class="wrapper">
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
<div class="BlackTitleExp_top_style">
simulated open section
<i class="fas fa-chevron-up chevron"></i>
</div>
</div>
Searched a lot but dint get specific answer. I am creating a website where i want to use a side bar.I want the side bar to expand to right on hover as shown below......Before
After
and the code
.body {
margin :0;
border :0;
}
* {
box-sizing : border-box;
}
.main-header {
position : absolute ;
width : 100% ;
height : 44px;
background-color : #999;
z-index:4;
}
.main-content {
padding-top :46px;
}
.side-nav {
position : absolute;
width:100% ;
background-color:#666;
height:100vh;
z-index:3;
padding-top:44px;
}
.side-nav ul {
list-style :0;
padding :0;
margin:0;
}
.side-nav ul li {
padding : 20px 10px;
border-bottom :1px solid #333;
}
.side-nav ul li a {
color:#fff;
text-decoration : none;
}
.side-nav ul li a i {
color: #333;
}
#media screen and (min-width: 600px)
{
.side-nav {
width :80px;
}
.side-nav ul li {
text-align: center;
}
.side-nav ul li span:nth-child(2) {
display:none;
}
.side-nav ul li i {
font-size: 26px;
}
.main-content {
margin-left:85px;
}
}
#media screen and (min-width: 1000px)
{
.side-nav{
width:200px;
}
.side-nav ul li {
text-align :left;
}
.side-nav ul li span:nth-child(2) {
display:inline;
}
.main-content {
margin-left:205px;
}
}
<DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="javascripts/jquery2.1.3/jquery.min.js"></script>
<link rel='stylesheet' href="css/myCss.css" />
</head>
<body>
<div class="main-header">
<span></span>
</div>
<div class="side-nav">
<nav>
<ul>
<li><a href="#"> <span><i class="fa fa-calendar"></i></span>
<span>xyz</span>
</a></li>
<li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span>
<span>sbc</span>
</a></li>
<li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span>
<span>Option 3</span>
</a></li>
<li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span>
<span>Option 4</span>
</a></li>
</ul>
</nav>
</div>
<div class="main-content">
<p>asjjasjlasj</p>
</div>
</body>
</html>
How do i do that using css and js with a nice transition .Thank you
You can use transition only using CSS3, I apply it to width, but could be done to anything you think work better for you:
so just replace the lines below and it should works for you, if you don't want to apply to width, do it to any other attributes that work better for your case, so just replace .side-nav as below and add .side-nav:hover as well:
.side-nav {
position : absolute;
width:80px ;
background-color:#666;
height:100vh;
z-index:3;
padding-top:44px;
-webkit-transition: width .5s; //add this line(Safari)
transition: width .5s; //add this line(Safari)
}
//also add hover as below
.side-nav:hover {
width:120px ;
}
for more info about CSS transitions, look at the link below:
https://www.w3schools.com/css/css3_transitions.asp
It's actually pretty simple when you use CSS Transitions
First you can just use the hover selector to change the width:
.sidebar {
width: 50px;
}
.sidebar:hover {
width: 200px;
}
That technically already works but now CSS Transitions comes into play:
.sidebar {
transition: width 300ms ease;
}
Basically what it does, whenever the width changes it plays a 300 millisecond long transition. ease is just an additional argument that makes the transition not so abrupt.
Everything together should look something like this
I have just started coding websites. I just recently started a website for a friend and though it would be cool to have a slide out menu that slide out from the top rather than the left or right of the page. However having done so and got it to work and all then having added some other content to the page have found that I am unable to get a scroll bar when processed through a browser. I have tried in the body tag, "overflow;scroll" which did not work and I have tried adding a div with the height of 3000px
Pls if anyone can help that will be great I will attach all my css and html (take note there is some jQuery and java)
Thanks
HTML & Java
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josh Site</title>
<link rel="stylesheet" type="text/css" href="../CSS/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../jQuery/jquery.cycle2.min.js"></script>
<script src="../jQuery/jquery.cycle2.video.js"></script>
<script src="../jQuery/jquery.cycle2.carousel.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!--Skeleton for Slide out Menu-->
<body class="menu menu-open">
<header>
<nav class="menu-side">
<!--Content for Menu Side-->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li id="logo"><img src="../../Assets/Josh-Logo.png" alt="Josh Meyers"></li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<!--End of Content for Menu Side-->
</nav>
</header>
<!--End of Skeleton for Slide out Menu-->
<!--Button to Toggle "Menu Side"-->
<img src="../../Assets/top-menu-icon.png" width="50px" height="50px" alt=""/>
<!--End of Button to Toggle "Menu Side"-->
<!--Josh Meyers about and Title-->
<div id="Josh-Meyers">
<h1>Josh Meyers</h1>
<p>Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.[1]
Typically, a lens is used to focus the light reflected or emitted from objects into a real image on the light-sensitive surface inside a camera during a timed exposure. With an electronic image sensor, this produces an electrical charge at each pixel, which is electronically processed and stored in a digital image file for subsequent display or processing. The result with photographic emulsion is an invisible latent image, which is later chemically "developed" into a visible image, either negative or positive depending on the purpose of the photographic material and the method of processing. A negative image on film is traditionally used to photographically create a positive image on a paper base, known as a print, either by using an enlarger or by contact printing.
</p>
</div>
<!--Responsive Video Slider and Title-->
<div id="Recent-Projects">
<h1>Recent Projects</h1>
</div>
<div id="video-wrapper">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<div class="cycle-slideshow"
data-cycle-carousel-visible="3"
data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-auto-height="640:360"
data-cycle-prev=".cycle-prev"
data-cycle-next=".cycle-next"
data-cycle-slides=">iframe"
data-cycle-youtube="true"
data-cycle-youtube-autostart="true"
data-cycle-pager=".cycle-pager"
data-cycle-carousel-fluid="true"
>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7TccWhZ6T8c?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VPuKbzP2KNM?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/DHW0hQHLpTc?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cycle-pager"></div>
</div>
<!--End Responsive Video Slider and Title-->
<script>
(function() {
var body = $('body');
$('.menu-toggle').bind('click', function() {
body.toggleClass('menu-open', 'toggle-open');
return false;
});
})();
</script>
CSS
body {
background-color:black;
overflow:scroll;
}
/*Design for Slide Down menu*/
.menu {
overflow:hidden;
position:relative;
top:0px;
-webkit-transition: top 0.8s ease;
-moz-transition: top 0.8s ease;
transition: top 0.8s ease;
}
.menu-open {
top:231px;
}
.menu-open .menu-side {
top:0px;
}
.menu-side {
background-color:#333;
border-bottom:1px solid #000;
color:#fff;
position:fixed;
top:-231px;
left:0px;
width: 100%;
max-width:100%;
height: 210px;
padding: 10px;
-webkit-transition: top 0.8s ease;
-moz-transition: top 0.8s ease;
transition: top 0.8s ease;
}
.menu-toggle {
position:relative;
display:block;
width:50px;
height:50px;
margin-left:auto;
margin-right:auto;
top:-23.5px;
}
/*Content style for Menu Side*/
.menu-side ul {
width:800px;
max-width:100%;
height:100px;
display:block;
text-align:center;
margin-left:auto;
margin-right:auto;
border-style:solid;
border-color:white;
border-width:thick;
-moz-box-shadow:20px 20px 20px 10px black;
-webkit-box-shadow:10px 10px 10px 10px 10px black;
box-shadow:1px 1px 20px 0.5px black;
}
.menu-side li {
margin-top:auto;
margin-bottom:auto;
padding:10px;
display:inline-block;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:18px;
font-style:italic;
}
/*Style for Josh Meyers About*/
#Josh-Meyers h1 {
text-align:center;
color:#FFF;
}
#Josh-Meyers p {
color:#FFF;
}
/*Style for Video Slide Show and Title*/
#Recent-Projects {
text-align:center;
height:40px;
width:100%;
max-width:100%;
}
#Recent-Projects h1 {
text-align:center;
color:#FFF;
}
iframe {max-width:100%}
#video-wrapper {
width:100%;
max-width:100%;
height:400px;
margin-top:5px;
}
.cycle-slideshow {
width:100%;
top:2%;
margin-left:auto;
max-width:90%;
margin-right:auto;
}
.cycle-prev, .cycle-next {
font-size:40px;
font-weight:bold;
color:#FFF;
display:block;
position:absolute;
top:60%;
z-index:999;
cursor:pointer;
}
.cycle-prev {left:2%;}
.cycle-next {right:2%;}
.cycle-pager {
text-align: center; width: 100%; z-index: 999; position: absolute; overflow: hidden; top:85%
}
.cycle-pager span {
font-family: arial; font-size: 50px; width: 16px; height: 16px;
display: inline-block; color: #ddd; cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
iframe {
padding-left:5px;
padding-right:5px;
}
You're on the right way. In your .menu you should remove your : overflow: hidden;
Because you put the .menu class within your body the html will hide everything beneath it.
Check out the [JSFiddle]
body {
background-color:black;
overflow:scroll;
}
/*Design for Slide Down menu*/
.menu {
position:relative;
top:0px;
-webkit-transition: top 0.8s ease;
-moz-transition: top 0.8s ease;
transition: top 0.8s ease;
}`
In the .menu class in the CSS change the overflow:hidden to overflow:scroll
Edit: Plunker preview here - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview
Probably a terrible title but after a minute I haven't been able to come up with better.
I have created a simple page with angularjs and some html. The issue I'm having is actually with css. When you click on a menu item, it highlights the block, but I'm getting a weird 1-2 px border that isn't highlighted along the bottom.
Been at this for hours and seriously going up the wall with it...
My html:
<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link type="text/css" rel="stylesheet" href="css.css" />
<!--AngularJS code-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
<!-- The navigation menu will get the value of the "active" variable as a class.
The $event.preventDefault() stops the page from jumping when a link is clicked. -->
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
</div>
<!-- ng-show will show an element if the value in the quotes is truthful,
while ng-hide does the opposite. Because the active variable is not set
initially, this will cause the first paragraph to be visible. -->
<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
fd
</body>
</html>
My css:
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
}
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
margin-bottom:45px;
line-height: normal;
}
#title {
display:inline-block;
padding: 18px 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
/*-------------------------
The menu
--------------------------*/
nav{
display:inline-block;
border-radius:2px;
}
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 18px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
nav a:first-child{
border-radius:2px 0 0 2px;
}
nav a:last-child{
border-radius:0 2px 2px 0;
}
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
background-color:#e35885;
}
p{
font-size:22px;
font-weight:bold;
color:#7d9098;
}
p b{
color:#ffffff;
display:inline-block;
padding:5px 10px;
background-color:#c4d7e0;
border-radius:2px;
text-transform:uppercase;
font-size:18px;
}
You can try to add on your a tags the following css
line-height: 60px;/*height of your header*/
padding: 0px 30px;/*remove the top and bottom padding*/
hope it will help you
Update the below css values with:
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 22px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
Your titles padding is the problem
This will work:
#title {
display: inline-block;
padding: 14px 200px;
color: #fff;
font-weight: bold;
font-size: 18px;
}
Update your css style of nav > a with this:
nav a {
color: #fff;
display: inline-block;
padding: 23px 30px 19px;
text-decoration: none !important;
text-transform: uppercase;
-webkit-transition: background-color 0.25s;
-moz-transition: background-color 0.25s;
transition: background-color 0.25s;
}
Otherwise you can set a custom height to the a.
Trying to adjust the size of the elements by using padding can be tricky. In this case it is better that the size is determined by the content of the elements. I propose the following changes:
First remove the padding of #tittle and instead add the desired positioning.
#title {
display:inline-block;
position: relative;
top: 18px;
left: 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
For the height of #header match the height of the child elements, we must include an element with style clear: both. This is so because #nav has float: right and the floats algorithm will extract the box from the normal flow. (reference: Visual formatting model )
HTML:
<div id="header">
<div id="title">...</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">...</nav>
<div class="clear"></div>
...
</div>
CSS:
.clear {
clear: both;
}
Finally, the elements contained in #header that we do not want in the normal flow are include in a div with the style float: left.
I updated your example:
http://embed.plnkr.co/ekxYOXLp4UUZD7ikHMHM/preview
I hope this helps.
When you use floats, you need to add a "clear" style to clear the floats:
<br style="clear:both" />
This is because anything inside of a div that's floated does not take space inside the div. The clear float CSS instructs the DIV to ensure that it encloses its floated children.
For example:
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
<br style="clear:both" />
</div>
You also have to remove the margin-bottom CSS style for your header.
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
line-height: normal;
}
Demo Plunker
Change the padding of nav a to
nav a {
padding: 21.5px 30px;
}