Develop Reference

Menu 3 levels only horizontal HTML/CSS/JavaScript + pushcontent

I'm trying to make a 3 levels ul li menu that take 100% width of the container but children ul goes under the parent level.
This is a screen what i'm trying to achieve.
#fakeheader,
#fakecontent{
width:100%
height:50px;
background:red;
position:relative
}
#nav {position: relative;}
#nav li {
list-style:none;
float: left;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: relative;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
<div id="fakeheader">Test
</div>
<ul id="nav">
<li>
Products
<ul class="child">
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
</ul>
</li>
<li>
Products
<ul class="child">
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="fakecontent">
test
</div>
Also is it possible then to push the content that will be under the menu?
Thanks in advance for any help and sorry for my bad english :P
Regards

Just add some styles:
#main-menu ul {
display: block;
list-style: none;
position: relative;
}
#main-menu > ul li ul {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
display: none;
}
#main-menu > ul li:hover > ul {
display: block;
color: red;
}

Navigation - transparent, horizontale center, difficult with Subnavigation

i would create this Navigation.
i have try some things with css and js.
but it works not on every browser and i think the code is dirty.
the driangle of the navigation-hover is center of the length. the transparent driangle is lay under the blue driangle and the body of the Subnavigation (or undernavigation) is flexible in width.
have you some ideas to create this navigation clean? and possibly without JS?
i hope you can help me. i have spend so much hours and it does nt correct work.
yours, yellow
$( ".active" ).mouseover(function() {
var xbreite = this.offsetWidth;
//Breite von nav-sub
var ybreite = this.nextElementSibling.offsetWidth;
var zbreite = ybreite - xbreite;
var xb = xbreite/2;
xb = xb - 23;
var zb = ybreite - xb;
xb = xb+"px";
zb = zb+"px";
// console.log(this.nextElementSibling.firstElementChild.firstElementChild);
//div rest -> aber bekomme kein element und style unter gebracht
var rest = this.nextElementSibling.firstElementChild.firstElementChild;
rest.style.width=xb;
var eck = this.nextElementSibling.firstElementChild.lastElementChild;
eck.style.width=zb;
//Subnav sichtbar machen
// this.nextElementSibling.style.top='59px';
this.nextElementSibling.style.visibility='visible';
});
//Subnavi schließen
$( ".nav-sub" ).mouseleave(function() {
var navsubs = $('.nav-sub');
var subsCount = $(navsubs).length;
for( hilf = 0; hilf < subsCount; hilf++){
//navsubs[hilf].style.top='-9999999px';
navsubs[hilf].style.visibility='hidden';}
});
.bcg{
position:absolute;
z-index:2;
}
.header{
position:fixed;
height:84px;
z-index:10;
background-color:#579dd3;
opacity: 0.75;
width:100%;
z-index: 100;
}
.logo{
float:left;
padding-left:1.875em;
padding-top:0.938em;
}
.nav{
float:left;
}
/* Navigation Primär */
.nav-prim{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
position:absolute;
right:1.64em;
bottom: -1.2em;
font-size:17px;
text-transform:uppercase;
z-index:999;
}
/* Dreieck Navigation Primär */
.nav-prim ul li a {
position: relative;
}
.nav-prim ul li a:hover::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/*Aktiver Link */
.nav-prim .active{
position: relative;
}
.nav-prim .active::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/* Ende Dreieck Navigation Primär */
.nav-prim ul li{
float:left;
list-style:none;
padding-left:0.7em;
padding-right:0.7em;
/* position: relative; */
}
.nav-prim ul li:last-child{
padding-right:0;
}
.nav-prim ul li a{
text-decoration:none;
color:white;
height:56px;
display:block;
}
/* Subnavigation */
.nav-sub{
position:absolute;
color:blue;
padding:0;
margin:0;
z-index:11111;
visibility:hidden;
top: 59px;
/*
display:none;*/
}
.nav-sub li{
clear:both;
padding:0 !important;
margin:0;
background-color:white;
width:100%;
}
.nav-sub li:first-child{
background-color:transparent;
padding:0;
margin:0;
}
.nav-sub .eck{
background-image:url('http://mattgelb.canopus.uberspace.de/nav_bg_active.png');
background-repeat:no-repeat;
height:25px;
float:left;
}
.nav-sub .rest{
background-color:white;
height:25px;
width:30%;float:left;
}
.nav-sub a{
color:blue !important;
text-transform:none;
}
.nav-sub a:hover{
color:red !important;
background-image:none !important;
}
.nav-sub a:hover::after{
border:0 !important;
background-image:none !important;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<img class="bcg" src="http://www.jessicajonesdesign.com/downloads/lines-wallpaper-orange.gif">
<div class="header">
<div class="logo">
<img width="60" src="https://davidwalsh.name/demo/codepenLogo.png">
</div>
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
</div>

Hi You can use something like this
The HTML
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest">
<div class="eck"></div>
</div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"><div class="eck"></div></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
And some css
body
{
background-color : #eeeeee;
}
div.nav ul
{
list-style-type : none;
}
div.nav ul li
{
font-family: Arial, Haettenschweiler, "Arial Narrow Bold", sans-serif;
color:black;
float: left;
padding: 10px;
vertical-align: middle;
text-transform:uppercase;
position : relative;
background-color : #0000ff;
}
div.nav a
{
color:black;
}
div.nav li ul
{
display: none;
position : absolute;
top : 100%;
left : -40px;
padding-top : 5px;
}
div.nav li:hover ul
{
display: block;
position: absolute;
z-index: 999;
}
div.nav li:hover li
{
float:none;
padding: 0;
text-align:left;
}
div.nav li:hover li a
{
min-width: 150px;
display:block;
}
.rest {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
margin-left : 10px;
position : relative;
}
.eck {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0000ff;
margin-left : 10px;
position : absolute;
top : -25px;
left : -30px;
z-index : 999;
}
You can also view the fiddle here https://jsfiddle.net/x8x2L93u/

Moving The Tabs Link To The Right Hand Side Of The Blog

I would appreciate some help with an issue I've come across whilst coding my blogger blog - http://www.blankesque.com.
I would like the tabs / 'page' links to appear on the right hand side of the screen. I have managed to do this with the three dropdown menu tabs / 'pages' links however the tab link which doesn't have a dropdown menu - titled 'contact' - doesn't appear alongside the other elements on the right hand side of the screen.
I have tried to add the following piece of coding to resolve this issue:
#wctopdropnav li{
float : right;
}
However another issue comes to light if I use the above stated coding. Although the tab does indeed appear on the right side of the screen, but the text/links for the other three tabs' dropdown menu options then also appear on the right side, but I would ideally want them to stay on the left side. Below I have included the entire navigation bar coding.
<style>
#wctopdropcont { /* width of the main bar categories */
width:100%;
height:40px;
display:block;
padding: 0;
margin-left: -16px;
z-index:100;
top:0px;
left:0px;
position:fixed;
background:#ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
}
#wctopdropnav{ /* social */
float: right;
width:900px;
height:7px;
display:block;
padding:0;
margin-left:30px;
}
#wctopdropnav ul{
float:right;
margin:0;
padding:0;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:35px;
margin:0;
padding:6.5px;/* height of the clicked bar */
background:#ffffff;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float:right;
display:block;
margin: 0px;
text-transform: uppercase;
font:11px cantarell!important;
padding: 5px;
text-decoration:none;
letter-spacing : 0.13em;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active,
#wctopdropnav .current_page_item a {
color:black;
font-weight: bold;
padding: 5px;
background: white; /* Old browsers */
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter:black;
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 11px;
background:#ffffff;
color: #000000;
width: 100px;
margin: 0;
padding: 0px 1px;
line-height:20px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter: white;
}
#wctopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}
#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<ul>
<li><a href='#'>Blankesque</a>
<ul>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li>
<li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li>
</ul></li>
<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
</ul></li>
<li><a href='#'>Features</a>
<ul>
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
<li><a href='http://www.blankesque.com/search/label/Creative'>Creative</a></li>
<li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
<li><a href='http://www.blankesque.com/search/label/Favourites'>Favourites</a></li>
<li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li>
<li><a href='http://www.blankesque.com/search/label/Hair'>Hair</a></li>
<li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li>
<li><a href='http://www.blankesque.com/search/label/Life'>Life</a></li>
<li><a href='http://www.blankesque.com/search/label/Skincare'>Skincare</a></li>
</ul>
</li></ul>
<li><a href='#'>Contact</a></li>
</div>
</div>
I have tried various different methods but to no avail, if anyone can aid me in solving this issue then I'd be extremely grateful.
Thank you in advance,
Iram

You should start by putting the li for contact inside of your ul like this:
<div id="wctopdropnav">
<ul>
<li>Blankesque
<ul>
<li>Home</li>
<li>About</li>
<li>Policies</li>
</ul></li>
<li>Social
<ul>
<li>Pinterest</li>
<li>Twitter</li>
<li>Bloglovin</li>
<li>Instagram</li>
</ul></li>
<li>Features
<ul>
<li>Beauty</li>
<li>Creative</li>
<li>Fashion</li>
<li>Favourites</li>
<li>Fragrance</li>
<li>Hair</li>
<li>Haul</li>
<li>Life</li>
<li>Skincare</li>
</ul>
</li>
<li>Contact</li><!-- RIGHT HERE -->
</ul>
</div>
See example: https://jsfiddle.net/pyexm7us/

How can I remove a gap between a slider image and a simple sidebar when opened?

I am using a simple sidebar for a menu, along with a slider.
The slider and the sidebar are functioning properly until I click
the cursor to open the sidebar navigation. The site is here:
http://newlifecorpus.com/demo/example.html
As you can see a gap occurs between the slider image and the sidebar.
How can I fix this? I am having a difficult time debugging this.
Please help.
HTML:
<html>
<body>
<div id="main-wrapper">
<div>
<!--start-->
<div id='ninja-slider'>
<ul>
<li><a data-image="images/test2.jpg"
href="http://www.menucool.com/responsive-slider">
<h3>The responsive image slider-1</h3></a></li>
<li><div data-image="images/test3.jpg"><h3>test this</h3></div>
</li>
<li><div data-image="images/test4.jpg">
<h3>Mobile friendly / Touch-enabled-3</h3></div></li>
</ul>
</div>
<!--end-->
</div>
</div><!-- end main wrapper-->
<---according to author, top bar and side bar logic must be
outside of main wrapper -->
<div id="top-bar">
<div id="menu-icon" class="menu-right">
</div>
</div>
<div id="sidebar">
<nav>
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
<li> Item 5 </li>
</ul>
<ul>
<li> Item 6 </li>
<li> Item 7 </li>
<li> Item 8 </li>
<li> Item 8 </li>
<li> Item 10 </li>
</ul>
</nav>
</div>
</body>
</html>
CSS:
#ninja-slider
{
width:100%;
margin:0 auto; /*center aligned*/
background:#222;
}
#ninja-slider > ul
{
padding:0;
margin:0;
}
/* slide */
#ninja-slider li > div, #ninja-slider li > a
{
/*max-width:960px;*/
margin:0 auto; /* center each slide */
/*border-radius:6px;
background:#333;*/
position: relative;
display:block;
box-shadow: 0 1px 5px rgba(0,0,0,.8),
inset 0 0 1px rgba(255,255,255,.4);
transition:none!important;
}
/* loading image indicator */
#ninja-slider div.preload
{
background: black url(images/loading.gif) no-repeat center 25%;
}
/*----- video -----*/
#ninja-slider a.video
{
position:absolute;
border:0;top:0;left:0;
width:100%;height:100%;
background:transparent url(images/video.png) no-repeat 50% 50%;
transition:none!important;
}
/*------ pager ------*/
/* The pager id should be: slider id + "-pager" */
#ninja-slider-pager
{
display:none;
}
/* --------- navigation controls ------- */
/* The nav id should be: slider id + ("-prev", "-next", and
"-pause-play") */
#ninja-slider-prev, #ninja-slider-next
{
position: absolute;
width:70px;
height:140px;
line-height:140px;
top: 50%;
margin-top:-70px;
display:inline-block;
background-image: url(images/navs.png);
background-repeat:no-repeat;
background-color:rgba(0,0,0,0.0);
transition:width 0.5s, background-color 1s;
color:white;
overflow:hidden;
opacity:0.4;
font-size:14px;
}
#ninja-slider-prev {
left: 0;
border-radius:0 5px 5px 0;
background-position:0 0;
}
#ninja-slider-next {
right: 0;
border-radius:5px 0 0 5px;
background-position:100% -140px;
}
#ninja-slider-prev:hover,
#ninja-slider-next:hover {
width:110px;background-color:rgba(0,0,0,0.5);cursor:pointer;}
/*pagination within the prev/next buttons*/
#ninja-slider-prev div {margin-left:74px;white-space:nowrap;}
#ninja-slider-next div {float:right;margin-right:74px;
white-space:nowrap;}
#ninja-slider-pause-play { display:none;}
/* Other settings
-------------------------------------------- */
#ninja-slider h2 {
position:absolute;font-size:100px;width:100%;
font-family:"Helvetica Neue", Helvetica, Arial;
font-weight:bold;top:20%;text-align:center;color:#FFF;
}
#ninja-slider h3 {
position:absolute;font-size:50px;width:100%;
font-family:"Helvetica Neue",Helvetica, Arial;
font-weight:lighter;top:20%;text-align:center;color:#FFF;
padding-top:140px;
}
/*styles for mobile*/
#media only screen and (max-width: 900px) {
#ninja-slider h2 {
top:22%;
font-size:40px;
}
#ninja-slider h3 {
top:22%;
font-size:20px;
padding-top:60px;
}
}
/* Usually you don't need to change the following settings
---------------------------------------------------------- */
#ninja-slider > ul
{
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000px;
backface-visibility: hidden;
perspective: 1000px;
-webkit-tap-highlight-color: transparent;
}
#ninja-slider-pager, #ninja-slider-prev, #ninja-slider-next,
#ninja-slider-pause-play
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#ninja-slider
{
position: relative;
overflow: hidden;
/*visibility: hidden;*/
padding:0;
}
#ninja-slider > ul
{
overflow: hidden;
position: relative;
list-style:none;
margin:0;
}
#ninja-slider > ul > li
{
float: left;
width: 100%;
position: relative;
list-style:none;
padding:0;margin:0;
}

How to center text in my div

I need to center the text in the div, but I have no idea how to. If someone could please help me, that would be absolutely wonderful.
CSS
#nav {
width: 425px;
height: 50px;
margin: 0 auto;
color: white;
font-size: 25px;
font-family: Mager;
}
#nav li {
list-style: none;
float: left;
}
#nav li:hover {
opacity: .6;
}
HTML
<div id="nav">
<ul>
<li>Home</li>
<li> </li>
<li>Soundcloud</li>
<li> </li>
<li>Facebook</li>
<li> </li>
<li>Contact</li>
</ul>

I have make a little fiddle you can see...
http://jsfiddle.net/Azzamean/fjnuw/67/
HTML:
<div id="menu">
<header>
<ul>
<li>Home
</li>
<li>Sound Cloud
</li>
<li>Facebook
</li>
<li>Contact
</li>
</ul>
</header>
</div>
And the CSS:
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link, a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#FFFFFF;
color:#E80000;
}
li {
display:inline-block;
}
#menu {
background-color:#E80000;
text-align:center;
}

Use the text-align property:
#nav li {
list-style: none;
float: left;
text-align:center;
}
But note that you are using float:left, so unless you set a width, you won't actually see any centering.
Here's a jsFiddle demo