I need to create a navigation bar using CSS3. A snapshot of the expected result is shown below
I have used <nav> <li> <ul> tags to create the skeleton for the page and added some CSS3 to simulate the desired output. The products dropdown menu has to be shown when the mouse hovers on the "Products" title in the navigation bar. Include appropriate color changes as indicated in the snapshot.
The CSS3 scheme is given below
Here is the code that I have tried so far but I am getting some error like Fail 1 - CSS elements for is wrong. Please help me understand where the problem is.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Create a simple Navigation bar</title>
<style type="text/css">
nav {
position: absolute;
display: inline-block;
top: 0;
width: 100%;
background-color: green;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
}
li {
list-style-type: none;
display: inline;
margin-right: 20px;
font-size: 25px;
}
a {
a: link;
text-decoration: none;
}
li:hover ul {
display: block;
position: absolute;
left: 200px;
background-color: green;
background-repeat: no-repeat;
margin: 0;
}
li:hover ul li a:link {
display: block;
margin-left: 30px;
background-repeat: no-repeat;
}
a:hover {
color: yellow;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Engineering</li>
<li>Telecom</li>
<li>Energy</li>
<li>Finance</li>
<li>Consultancy</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Hello and welcome to StackOverflow :)
Here is my best attempt to figure out what the spec described - I have added comments in the CSS to help you map it back to the spec.
As to what was specifically wrong with your code - it's a little hard to tell because there is a lot of extra stuff going on. It usually helps to keep things simple in CSS (and pretty much any code really). I started from scratch and reproduced what the spec arrived to get the solution below.
Bonus Tip: Using the Chome Dev Tools (or other similar tools specific to your browser) can help you debug how the CSS is being applied to each element.
/*
The nav section in the spec. Pretty much verbatim as the spec describes it
*/
nav {
display: block;
position: absolute;
width: 100%;
background-color: green;
top: 0;
}
/*
The li section in the spec. Pretty much verbatim as the spec describes it
*/
li {
list-style-type: none;
display: inline;
margin-right: 20px;
font-size: 25px;
}
/* This is missing from the spec. Used to hide the submenu initially */
li>ul {
display: none;
}
/*
The li:hover ul section in the spec. Pretty much verbatim as the spec describes it
*/
li:hover>ul {
display: block;
position: absolute;
left: 200px;
background-color: green;
margin: 0;
}
/*
The li:hover ul li a:link section in the spec. Pretty much verbatim as the spec describes it
*/
li:hover>ul>li>a {
display: block;
margin-left: -30px;
}
/*
The a a:link section in the spec. Pretty much verbatim as the spec describes it
*/
a {
color: #fff;
text-decoration: none;
}
/*
The a a:hover section in the spec. Pretty much verbatim as the spec describes it
*/
a:hover {
color: orange;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Create a simple Navigation bar</title>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Engineering</li>
<li>Telecom</li>
<li>Energy</li>
<li>Finance</li>
<li>Consultancy</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Related
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.icon {
width: 32px;
height: 32px;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: dodgerblue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_311846.png" class="absoluteCenter">
<div>LOGIN</div>
</a>
</li>
<li>
<a href="#" >REGISTER</a>
</li>
<li>
<a href="#" class="new_paragraph" >GET<span>PREMIUM</span></a>
</li>
<li>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
Hello community,
I added an icon for my navbar for the login, but when I load the website, the icon doesnt load instantly. How can I change it? I heard that it's better to use links for inserting pictures or icons to your website because it loads faster than when having a seperate picture in your project file as .png or .jpg.
It really sucks that its slowly loading, usually on other websites its instant.
Thanks!
The reason is its a massive image scaled down to icon size with your CSS and is probably being grabbed from a slow server. Here, all I did was reupload that icon to imgur and made it smaller. See here: https://i.imgur.com/76JuT8K.png?1 And look how your code runs now:
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.icon {
width: 32px;
height: 32px;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: dodgerblue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img class="icon" src="https://i.imgur.com/76JuT8K.png?1" class="absoluteCenter">
<div>LOGIN</div>
</a>
</li>
<li>
<a href="#" >REGISTER</a>
</li>
<li>
<a href="#" class="new_paragraph" >GET<span>PREMIUM</span></a>
</li>
<li>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
This may depend on your server and cdn config BUT as written,
It loads pretty darn fast (there is no loading animation or logic waits just load order and parallelization issues). If you want it to load faster you can offset your font links, each of those is going to take up a DNS lookup and load BEFORE your image. You can either prefetch, async, or defer these. If you are going to add a css reference do the same. Javscript do the same. Internal CSS style tag move it to bottom of body. You can also move fonts, js, css to local file so it doesn't use DNS to do lookups. Additionally, your CDN is serving on http1.1 ideally you want http2 for more parallelization. Finally, you have no caching on the image on web, this should be set in your CDN for that image or image file types in general. That means you'd only ever need to download it one time.
Much more server specific is cache control for your other assets. If you make people download js, css, fonts everytime they load your site then its always gonna suck up more time than if you cache it.
It's slow on my machine too - over 600 ms - and it does not get cached.
If you don't have better options as far as a sever to host it on, you could consider embedding it directly into your HTML. Here's a site that will convert your existing URL into a base 64 img tag, that you just include directly in your page and there's no additional load needed:
https://base64.guru/converter/encode/image/png
If you link to an external asset, the loading time can only be as fast as the speed and throughput external source's servers permit for the nature and size of the asset. In general, images are always going to load more slowly than text, html and your CSS styles. There are ways to mitigate against this using optimisations in front- and back-end code, but there are also low-hanging fruits if you wish to keep your project relatively simple. It's worth noting that all of the icons on the homepage of onlinewebfonts.com took a little while to load, and it's probable that they aren't prioritising performance as a free and honestly rather old-school looking service.
I have a few suggestions that may help you out.
Firstly, the gold-standard for external icons (many of which are completely free) is fontawesome.com. They provide copy-and-paste html for hundreds of modern, performant icons plus guides for hosting, CSS styling and accessibility.
Secondly, consider the format and resolution of the content you wish to include. The icon you have chosen is a medium-to-large PNG. Considering the rendered size of the icon, this could be overkill and would naturally increase the load time. As Dai mentioned, self-hosting gives you more control over loading and content sizing; you could create a smaller, optimised version of the file and host it yourself with your html and css files.
Finally, depending on your project goals, you could consider a more advanced solution and create your own icon using the SVG html element. SVGs give you a tonne of creative flexibility in an efficient, embedded format which doesn't load via a separate HTTP request but simultaneously with your html. (Worth noting here that this does mean these icons cannot be cached or pre-loaded.) There are loads of free-to-use SVG code templates if you search for them, or you can attempt to create a unique one of your own design using the numerous permitted shape and fragment elements, or in a vector graphics program like Adobe Illustrator. Lots more on SVGs at csstricks.com.
Hope this helps!
I have a navbar that contains three elements. Horizontally, from left-to-right, they are: socialMediaIcons, logoArea, and navBarOptionsList.
I wrote javascript and CSS such that, when the user begins to scroll down the page, the socialMediaIcons and navBarOptionsList's visibility change to hidden.
The problem is, the socialMediaIcons element lags by about half a second to become hidden after the user scrolls down. The navBarOptionsList hides immediately after even slightly scrolling down the page (this is the expected behaviour -- and it is what I'd like the socialMediaIcons to do too).
Below is the CSS (which is where I suspect the problem is), as well as the Javascript (detailing the logic for hiding the two elements) and HTML:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS, and stupid fontawesome shyt -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Required CDNs: jQuery, Popper.js, Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="../resources/codigoinitiativefavi.ico"/>
<!--Custom CSS Stylesheet-->
<link rel="stylesheet" href="../styles.css"/>
<title>Codigo Initiative</title>
</head>
<body>
<nav class="navBar">
<div class="socialMediaNavBarArea">
<ul class="socialMediaIconList">
<li class="socialMediaIcon"><i class="fab fa-facebook-f"></i></li>
<li class="socialMediaIcon"><i class="fab fa-twitter"></i></li>
<li class="socialMediaIcon"><i class="fab fa-youtube"></i></li>
<li class="socialMediaIcon"><i class="fab fa-github"></i></li>
<li class="socialMediaIcon"><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<div class="logoArea">
<img id="navBarLogocaster" src="../resources/codigoinitiativewhite.png" alt="Codigo Initiative">
</div>
<!--TODO: Nav bar options list font style should match the Codigo Initiative logo font style-->
<div class="navBarOptionsAreaFullScreen">
<ul class="navbarOptionsList">
<li class="navItem">
<a class="navLink" href="">Home</a>
</li>
<li class="navItem">
<a class="navLink" href="">Resources</a>
</li>
<li class="navItem">
<a class="navLink" href="">Curriculums</a>
</li>
<li class="navItem">
<a class="navLink" href="">Contact</a>
</li>
</ul>
</div>
<div class="hamIconNavOptions">
<ul class="hamIconNavOptionsList">
<li class="hamburgerIconNavOptions">☰
<ul id="hamburgerIconNavOptionsNestedList">
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Home</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Resources</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Curriculums</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Contact</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="placeholder"></div>
</body>
<footer>
<script src="../index.js"></script>
</footer>
</html>
CSS:
/*Hamburger Icon styling*/
.hamburgerIconNavOptions{
color: white;
padding-top: 20px;
}
/*Styling for the hamburger icon (which is really a list)*/
.hamIconNavOptionsList{
margin: 0;
padding: 0;
list-style: none; /*removing the bullet point*/
}
/*styling the nested list in the hamburger icon*/
#hamburgerIconNavOptionsNestedList{
margin: 0;
padding: 0;
list-style: none; /*Removiing the bullet points*/
background-color: #13204f;
opacity: .5; /*Making this bad boy transparent. (0 is completely transperent, 9 is solid black)*/
}
/*Removing the default underlining provided by the anchor tag's default styling*/
.navOptionAnchorItem{
text-decoration: none; /*Removing the default styling from the anchor element*/
color: white;
}
/*Removing the underlining of links provided by the anchor tag's default styling*/
.navOptionAnchorItem:link {
text-decoration: none;
}
/*Removing the underlining that occurs by default on anchor tags when hovering over them.*/
.navOptionAnchorItem:hover {
text-decoration: none;
}
/*Styling each list item within the hamburger icon's nested list*/
.hamburgerIconNavOptions{
float: left;
width: 200px;
height: 40px;
}
#media(max-width: 1200px) {
/*This logic will execute when the screen's width becomes too small to display everything*/
.socialMediaIconList{
display: none; /*Will hide the list items when the screen's width is too small to display them*/
}
.socialMediaIconList.toggleCls{
display: none; /*will remove the social media icon list if the screen isn't wide enough to display it*/
}
.hamburgerIconSocialMedia {
display: none; /*TODO: Don't really need a hamburger bar to begin with. Need to come back and remove this.*/
}
/*Same stuff as above, except for the navBar options list*/
.navbarOptionsList{
display: none;
}
#hamburgerIconNavOptionsNestedList.toggleCls{
display: block;
}
/*The screen is too small. But hide the nested list that belons to the hamburger icon. Will be displayed when the hamburger icon is clicked.*/
#hamburgerIconNavOptionsNestedList{
display: none;
}
}
/*Make the hamburger icon disappear when the screen is large enough to display all list view items*/
#media(min-width: 1199px) {
.hamIconNavOptions{
display: none; /*Hides the hamburger icon when the screen is large enough to display everything*/
}
.socialMediaIconList{
display: initial; /*Shows the social media links*/
}
.navbarOptionsList{
display: initial;
}
}
.navBar {
display: flex;
flex-direction: row; /*Aligns items horizontally*/
flex-wrap: nowrap; /*Prevents overflow wrapping. We'd rather everything get packed on a single row.*/
padding: 10px;
background-color: #13204f;
height: 125px;
position: fixed;
width: 100%;
}
.socialMediaNavBarArea {
position: relative;
width: 25%;
padding: 30px 0;
text-align: center;
}
.logoArea {
position: relative;
width: 50%;
text-align: center;
}
.navBarOptionsAreaFullScreen {
position: relative;
width: 30%;
padding: 30px 0;
text-align: center;
font-size: 15px;
padding-right: 30px;
}
/*Social Media area*/
.socialMediaIcon {
list-style: none;
margin: auto;
display: inline-block;
font-size: 10px;
padding: 10px 10px;
color: white;
border: 1px solid white;
border-radius: 50%;
transition: .5s;
}
.socialMediaIconList {
padding-left: 0px;
padding-right: 90px;
}
.socialMediaNavBarIcons {
top: 40%;
left: 50%;
transform: translate(-53%, -50%);
position: absolute;
}
.socialMediaIcon:hover {
color: #565759;
border: 1px solid #565759;
transition: .75s;
}
/*Navigation Bar logo area*/
#navBarLogocaster {
max-width: 100%;
max-height: 75%;
/*Aligns the image center horizontal and vertical*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*Navigation Bar options area*/
.navItem {
display: inline;
}
.placeholder {
height: 5000px;
}
.navLink {
padding: 5px;
color: white;
}
.navLink:hover {
text-decoration: none;
color: #565759;
transition: .75s;
}
Javascript:
/**
* The following logic controls what will happen when the user scrolls down on the screen.
* The navbar will decrease in heigh slightly.
*/
window.onscroll = function() {configureNavBar()};
function configureNavBar() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
//The user is scrolling down, so minimize the nav bar, and hide all corollary navbar items to reduce clutter.
document.querySelector(".navBar").style.height = "90px";
hideSocialMediaIcons();
hideNavBarOptions();
} else {
//The user has scrolled back up to the top. Display all corollary navbar options/details.
document.querySelector(".navBar").style.height = "120px";
unhideSocialMediaIcons();
unhideNavBarOptions();
}
}
/**
* Will hide the social media icons (if it is even being displayed at all)
*/
function hideSocialMediaIcons() {
let socialMediaIconList = document.querySelector(".socialMediaIconList");
//If the social media icons are being displayed, hide them.
if(socialMediaIconList.style.visibility != "hidden") {
socialMediaIconList.style.visibility = "hidden";
} else {
//no further action needed, as the social media icons are already hidden.
}
}
/**
* Will hide the navbar's (full-screen) options when scrolling down.
*/
function hideNavBarOptions(){
let navBarOptions = document.querySelector(".navbarOptionsList");
//If the social media icons are being displayed, hide them.
if(navBarOptions.style.visibility != "hidden") {
navBarOptions.style.visibility = "hidden";
} else {
//no further action needed, as the social media icons are already hidden.
}
}
Because there is transition duration set for socialMediaIcon class but for .navBarOptionsList no duration set.
I'm fairly new to PHP / HTML / CSS. I'm trying to copy / mimic an internal website we're using at work, the current code is quite old (still using frames for example).
Currently, I'm stuck at trying to open a link (internal php / html file) from the navigation bar to the main section of the same page. I thought I found a workaround with the include syntax in php, hiding all the pages with css, and only showing the one you clicked on. But I found out fairly quickly that this wouldn't work in my situation, because when you open index.php in a browser, every .php or .html is loaded in the background. Our internal website uses a lot of different .php files, so load times wouldn't be optimal I think.
What I'm trying to achieve: only load the .php or .html link when clicked on in the navigation bar, and open it in the main section of the same page.
Does anyone have a solution for my problem? Thank in advance!
What I'm trying to achieve:
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family: Sans-serif;
line-height: 1.5em;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
overflow: hidden;
/* Disables scrollbars on the header frame. To enable scrollbars, change "hidden" to "scroll" */
background: #4B84CF;
background-image: url(./images/headerbackground.jpg);
background-position: right top;
background-size: 30%;
background-repeat: no-repeat;
}
#nav {
position: absolute;
top: 150px;
/* Set this to the height of the header */
left: 0;
bottom: 0;
width: 230px;
overflow: auto;
/* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
background: rgb(75, 132, 207);
background: linear-gradient(90deg, rgba(75, 132, 207, 1) 70%, rgba(75, 132, 207, 0.7567401960784313) 85%);
}
#logo {
padding: 10px;
}
main {
position: fixed;
top: 150px;
/* Set this to the height of the header */
left: 230px;
right: 0;
bottom: 0;
overflow: auto;
background: #ffffff;
}
.innertube {
margin: 15px;
/* Provides padding for the content */
}
p {
color: #555;
}
nav h1 {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}
nav ul {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
nav ul a {
list-style-type: none;
margin: 5;
padding: 5px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
/*IE6 fix*/
* html body {
padding: 100px 0 0 230px;
/* Set the first value to the height of the header and last value to the width of the nav */
}
* html main {
height: 100%;
width: 100%;
}
/* This hides all pages */
.page {
display: none;
}
/* This displays the first page */
.default {
display: block;
}
/* This displays the page corresponding to the one you clicked on */
:target {
display: block;
}
/* This hides the default page when another page is clicked */
:target~.default {
display: none;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index_style.css">
<head>
<title>Test index-pagina</title>
</head>
<body>
<header id="header">
<div id="clock">
<?php include ('clock.php');?>
</div>
</header>
<main>
<div class="innertube">
<div id="navtest" class="page">
<?php include ('navtest.php');?>
</div>
<div id="welkom" class="page">
<?php include ('welkom.php');?>
</div>
<div id="about" class="page">
<?php include ('about.html');?>
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation bar 1</h1>
<ul>
<li>Navtest</li>
<li>Welkom</li>
<li>About</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<h1>Navigation bar 2</h1>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</nav>
</body>
</html>
You can use JavaScript to find out which button is clicked and used jQuery's load() function to render the php content on your page element.
Just add a dataset attribute to your li elements say, data-page and add a unique id or name to that data-page attribute. I would recommend that you use the file names of the pages you want to load so it would be easier to load it later as you will see in the example snippet below.
You can now use JavaScript to retrieve that dataset value, concatenate it with a .php extension and then use the jQuery's load() function to render the content to the page.
Check and run the following Code Snippet or open this JSFiddle for a practical example of the above approach:
const links = document.querySelectorAll("#nav li a");
links.forEach( function(e) {
e.addEventListener("click", function() {
let goToPage = e.dataset.page;
$("#page").load(goToPage + ".php");
});
})
<main>
<div class="innertube">
<div id="page">
<!-- Content will be shown here -->
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation</h1>
<ul>
<li><a data-page="navtest">Navtest</a></li>
<li><a data-page="welkom">Welkom</a></li>
<li><a data-page="about">About</a></li>
<li><a data-page="somePage1">Link 4</a></li>
<li><a data-page="somePage2">Link 5</a></li>
</ul>
</div>
</nav>
I've created a page (http://www.nextsteptutoring.co.uk/WhatWeTeach.html) with 4 selectable h3 elements that bring up further text on the topic for the user to read.
The 1st element works perfectly - the whole element is selectable. The 2nd and 3rd are partially selectable, the + and first letter can be clicked. The 4th can't be clicked at all.
The JS works fine and my CSS would seem to be fine as displayed by the 1st working fine, and the 2nd and 3rd being partially ok. I can't see how this could be a z-inex as the only element on the page with a z-index value is the footer, which loads fine as well.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Cabin+Condensed" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="Main.CSS">
<title>NST | What We Teach</title>
</head>
<body>
<div class="container">
<header> </header>
<div class="leftcolumn">
<h2>What We Teach</h2>
<p> Clear schemes of work, linked to the National Curriculum, which
are individually tailored to your child’s needs. We offer one to one
sessions, or small groups, with a maximum of 4 children. Groups are
based on specific needs/ability, rather than on chronological age.<br/>
<br/>
Programmes of study are adapted for high achievers in need of a
challenge, as well as those who lack confidence or require additional
support, outside of mainstream education.<br/>
</p>
</div>
<div class="rightcolumn">
<div class="hide">
<h3>+ Primary Maths</h3>
<ul>
<li>The four rules of number</li>
<li>Focus on Mental Arithmetic</li>
<li>Multiplication and associated division facts</li>
<li>Fractions, decimals and percentages</li>
<li>Data Handling, measures, and shapes</li>
<li>Algebra</li>
<li>Using and applying mathematical skills in everyday problem
solving</li>
<li>Confidence building and catch-up</li>
</ul>
</div>
<div class="hide">
<h3>+ Primary English</h3>
<ul>
<li>Clear focus on comprehension. Building skills of inference and
reasoning</li>
<li>Individually tailored spelling programme (specialised dyslexia
spelling programme)</li>
<li>Grammar and punctuation</li>
<li>Writing for different purposes and audiences</li>
<li>Handwriting</li>
<li>Confidence building and catch-up</li>
</ul>
</div>
<div class="hide">
<h3>+ Year 6 to Year 7 Transition</h3>
<p>Tailored English and Maths programme to support youngsters who
lack confidence during their transition from Primary to Secondary
education.</p>
</div>
<div class="hide">
<h3>+ Written Reports</h3>
<p>Parents may wish to receive a termly or yearly written report on
their child’s progress, and targets for the next phase of their
learning. This service will incur a fee of £10.</p>
</div>
</div>
<footer> </footer>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("header").load("Header.txt");
});
$(document).ready(function(){
$("footer").load("Footer.txt");
});
$(".hide > h3").click(function(){
$(this).parent().toggleClass("show");
});
$(".show > h3").click(function(){
$(this).parent().toggleClass("hide");
});
</script>
</body>
</html>
footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background: rgba(150,150,150,1);
color: white;
text-align: center;
z-index: 5;
}
footer .container div {
display: inline-block;
padding: 5px 30px 2px 30px;
}
#contact {
background: rgba(120,117,185,1);
float: right;
padding: 5px 100px 2px 100px;
}
.hide h3 {
width: 100%;
background: rgba(171,167,242,0.75);
border-radius: 5px;
cursor: pointer;
padding: 2px 0 2px 8px;
}
.hide p, .hide ul {
opacity: 0;
height: 0;
}
.show {
height: auto;
}
.show p, .show ul {
opacity: 1;
list-style-type: square;
height: auto;
font-size: 18px;
}
Any ideas would be greatly appreciated!!
The problem is css.
Add this:
.hide p, .hide ul {
opacity: 0;
height: 0;
overflow: hidden;
}
The li elements were overlapping the buttons. So give overflow: hidden to the ul and they get hidden properly without affecting the rest.
CSS
.hide h3 {
padding: 2px 0 2px 10px;
width: 97%;
background: rgba(171,167,242,0.75);
border-radius: 5px;
cursor: pointer;
position: relative;
}
Add position:relative CSS property to your .hide h3 it will work fine.
alt text http://sites.google.com/site/yanchengcheok/Home/google-drop-down-menu.png
Hello, whenever we go to Google Page and click on the "more", a menu will be dropped down. I would like to have the following effect on my web site too. May I know which JavaScript library can help me to achieve the similar effect?
Google released their closure libray, I think the menu in your question is the following
http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/submenus.html
hope it helps
Cheers
Similar menus, very well documented and flexible. Only Denis' answer -- using the actual closure library -- is better, but I doubt it's as well documented.
Any JavaScript library can help you in such situations.
You may want to check out the following example, which I hope can get you going in the right direction:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Drop down demo</title>
</head>
<body style="font-family: Arial; font-size: 11px; margin: 0 auto;">
<div id="menu_bar" style="height: 25px; width: 100%; position: absolute;">
Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
<div style="float: left;">
<a id="more_link" href="#" style="float: left;">more...</a>
<div id="more_menu" style="width: 95px; display: none;">
More Item 1
More Item 2
More Item 3
More Item 4
</div>
</div>
</div>
<div id="spacer" style="height: 30px;"></div>
Here goes the body
<script type="text/javascript">
document.getElementById('more_link').addEventListener('click', function(e) {
document.getElementById('more_menu').style.display = 'block';
e.stopPropagation();
}, false);
document.body.addEventListener('click', function() {
document.getElementById('more_menu').style.display = 'none';
}, false);
</script>
</body>
</html>
Screenshot from the above example:
Drop down demo http://img31.imageshack.us/img31/7576/menuxs.png
You just add listener to click event for a "more" element:
elementRef.addEventListener("click", function() {
// listener code here
}, false);
(you can do this in any JS library if you want to). This listener should now just display (change CSS property display from none to block) another element (ie. <div id="more" />). Also you add another listener for click event, but this time for the body element (to hide menu).
Final code could looks like following:
JavaScript:
document.getElementById("toggle-more").addEventListener("click", function(e) {
document.getElementById("more").style.display = "block";
e.stopPropagation();
}, false);
document.body.addEventListener("click", function() {
document.getElementById("more").style.display = "none";
}, false);
HTML:
<span id="toggle-more">More...</span>
<div id="more">
<ul> ... </ul>
</div>
CSS:
#more {
display: none;
position: absolute;
top: 15px;
left: 150px;
}
alt text http://sites.google.com/site/yanchengcheok/Home/google-copy-cat.png
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background: #fff;
font: .74em "Trebuchet MS", Verdana, Arial, sans-serif;
line-height: 1.5em;
}
/* Help Menu Section. */
a#help-menu:hover {
color: #3B6EBF;
}
#help-menu {
text-decoration: none;
}
#help-menu u {
text-decoration: underline;
}
#jsddm
{ margin: 0;
padding: 0}
#jsddm li
{ display: -moz-inline-box; /* For FF */
display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on blocks */
list-style: none;
}
#jsddm li a
{
display: block;
white-space: nowrap}
#jsddm li ul
{ margin: 0;
padding: 0;
background:none repeat scroll 0 0 #FFFFFF;
border-color:#C9D7F1 #3366CC #3366CC #A2BAE7;
border-style:solid;
border-width:1px;
text-align: left;
position: absolute;
display: none;}
#jsddm li ul li
{
float: none;
display: inline}
#jsddm li ul li a
{
padding:0.2em 0.5em;
text-decoration: none;
background: #FFFFFF}
#jsddm li ul li a:hover
{
color: #FFFFFF;
background: #3366CC}
.jsddm-seperator {
border-top:1px solid #C9D7F1;
font-size:1px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{ ddmenuitem = $(this).find('ul').eq(0).toggle();}
function jsddm_close(evt)
{
if (ddmenuitem) ddmenuitem.hide();
}
$(document).ready(function()
{
$('#jsddm > li').bind('click', jsddm_open);
//$(this).bind('click', jsddm_close);
});
</script>
</head>
<body>
<div style="text-align:center">
<ul id="jsddm">
<li>Home</li>
<li> · </li>
<li>Main Menu1</li>
<li> · </li>
<li>Main Menu2</li>
<li> · </li>
<li>Main Menu3</li>
<li> · </li>
<li>Main Menu4</li>
<li> · </li>
<li><u>Help</u><small>▼</small>
<ul>
<li>Install</li>
<li><div class="jsddm-seperator"></div></li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</body>
a few weeks back I had stumbled across a blog post on creating google like menu
may be that could help you :
http://blog.geotitles.com/2011/09/creating-the-new-top-black-bar-found-in-google-and-all-its-products/
It uses jQuery but the images you have posted looks like the old google menu since the new menu is black and even this blog post is on the same new menu but it also includes the dropdown menu, so I think this might help you.
Update
Here is a blog post on creating the old menu as well, you can also check this out, but this does not have the dropdown feature which you are asking for, may be the former one is better.