navigation on media cant get 100% width

navigation on media cant get 100% width - javascript

My navigation cant get a full width on media, I tried every way and cant locate where my mistake is, so I attached you the code, please if any one have an idea how to solve this, and set the width to full width = 100%?
The HTML
<nav class="navi" id="target">
<div class="menu" id="header">
<li><a class="link-1" href="#">home</a></li>
<li><a class="link-1" href="#">second</a></li>
<li><a class="link-1" href="#">third</a></li>
<div class="logo">
<li><img alt="Brand" src="logo.png" height="40px" width="60px"><li>
</div>
</div>
<div class="handle"><p>menu</p></div>
</nav>
The CSS:
nav {
width:100%;
margin-top: 0;
padding: 10px;
text-align: center;
font-family: arial;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
position:fixed;
text-align:right;
z-index:10;
}
nav li{
display: inline;
}
nav ul{
min-height:20px;
}
.navi{
background: rgba(0,0, 0, 0.5);
}
.navi:hover{
background-color: rgba(0,0,0, 1);
}
.link-1 {
transition: 0.3s ease;
color: #fff;
font-size: 16px;
text-decoration: none;
border-top: 1px solid ;
text-align:right;
padding: 20px 0px;
margin: 0 20px;
font-weight: italic;
letter-spacing:2px;
}
.link-1:hover {
border-top: 2px solid #fff;
text-decoration: none;
color:#fff;
padding: 3px 6px;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
}
.menu {display:block;
}
.handle {display:none;}
/*media try*/
#media (max-width: 580px) {
#target{
}
nav {
width:100%;
margin-top: 0;
display:block;
max-height:0;
margin-top:-20px;
padding-top:18px;
padding-right:-20%;
}
nav li{
display:block;
padding:10px;
background:#000;
}
.navi{
background: rgba(0,0, 0, 0.9);
text-align:center;
border:0;
background:#000;
}
.navi:hover{
background-color: rgba(0,0,0, 1);
border:0;
}
.link-1 {
border:0px solid #bbb;
font-size:18px;
}
.link-1:hover {
text-decoration:underline;
border:0px solid #bbb;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
display: none;
}
.menu {display:none;
}
.handle {display:block;
color:#fff;
font-size:40px;
text-decoration:none;
text-align:right;
}
.handle:hover{
}
.handle p{
color:#fff;
cursor: pointer;
-webkit-text-stroke: 1px black;
-webkit-font-smoothing: antialiased;
}
}
I fixed the HTML.

Add box-sizing: border-box; for nav.
ul tag is missing in your html.
Also make sure to remove the default padding and margin for ul.
nav ul{ padding: 0; margin:0;}
To stretch menu to full width of the window, apply the bg colour for nav, Or remove the padding:10px from nav.

Related

Hambuerguer menu not working online but working in xampp/localhost

I am having a problem with a responsive menu. While I'm in my offline server, the responsive menu works fine in mobile format, but when It's in the real server, it does not work. I've been struggling with this for hours. Here is my code:
HTML
<div class="menu">
<div class="menu_bar">
<img id="logo-mobile" src="design/logo-titol-prova-1.PNG">
<span class="icon-menu"></span>
</div>
<nav>
<img id="logo" src="design/logo-titol-prova-1.PNG">
<ul>
<li class="first">About</li>
<li>Surf/Kitesurf</li>
<li>The Tour</li>
<li>Lodging</li>
<li>Testimonials</li>
<li>Reserve Now</li>
</ul>
</nav>
</div>
CSS
/*Menu*/
.menu{
width: 100%;
position:fixed;
top:0;
margin:0 auto;
padding: 0;
box-sizing: border-box;
font-size: 15px;
text-align: center;
background-color: transparent;
-webkit-transition: background-color .5s;
z-index:1000;
}
.menu nav {
display: table;
max-width:1200px;
max-width:100%;
margin:0 auto;
padding: 20px;
box-sizing: border-box;
text-align: center;
z-index:1000;
-webkit-transition: margin-left .5s;
}
.menu_bar {
display:none;
}
.menu nav ul {
width:100%;
overflow:hidden;
margin: 0;
padding: 0;
display: inline;
list-style:none;
text-align: center;
}
.menu nav ul li {
display: inline;
width:100%;
margin: 0;
padding: 0;
padding-left: 30px;
text-align: center;
background: url(design/list.png) left no-repeat;
}
.menu nav ul li.first {
background:none;
}
.menu nav ul li a {
display: inline-block;
margin:15px 15px 0 15px;
padding:15px 0;
color:#303030;
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
text-transform: uppercase;
text-decoration:none;
letter-spacing:1px;
}
.menu nav ul li a:hover {
color:#ffc000;
text-decoration: none;
transition: all .5s linear;
-o-transition: all .5s linear;
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
}
.menu nav ul li a:active {
color:#71e1b0;
}
section {
padding:20px;
}
img#logo{
float:left;
display: block;
margin:0;
padding:0;
-webkit-transition: width .5s;
}
#media screen and (max-width:1100px){
img#logo{
max-width:300px;
margin-left: 10px;
}
.menu{
width: 100%;
padding-top:10px;
padding:0;
font-size:15px;
float:right;
}
.menu nav ul li a {
margin:10px 15px 0 15px;
}
.menu nav {
width:100%;
max-width:100%;
margin:0 auto;
text-align: center;
z-index:1000;
}
#media screen and (max-width:800px){
img#logo{
display:none;
}
.menu nav {
max-width:250px;
height:100%;
right:-100%;
margin:0;
position: fixed;
background: #fff;
}
.menu nav ul li {
display:block;
float:none;
padding:0;
background:none;
}
.menu nav ul li a {
display:block;
padding:20px 20px 20px 0;
margin:0;
color:#303030;
font-family: 'Dosis', sans-serif;
font-size: 15px;
font-weight:400;
text-align: right;
text-transform: uppercase;
background: none;
border-right:4px solid #71e1b0;
}
.menu nav ul li a:hover {
color:#71e1b0;
text-decoration: none;
border-bottom:none;
}
.menu_bar {
display:block;
max-width:100%;
padding:15px;
background:#fff;
}
.menu_bar .bt-menu {
display:block;
padding:20px;
color:#33e873;
text-decoration:none;
text-align:right;
font-weight:bold;
font-size:27px;
}
img#logo-mobile{
float:left;
max-width:200px;
margin: 7px 0 0 10px;
padding:0;
}
menu.js
$(document).ready(main);
var contador = 1;
function main(){
$('.bt-menu').click(function(){
// $('nav').toggle();
if(contador == 1){
$('nav').animate({
right: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
right: '-100%'
});
}
});
}
script-menu.js
$(document).ready(function(){
$("#banner").css({"height":$(window).height() + "px"});
var flag = false;
var scroll;
$(window).scroll(function(){
scroll = $(window).scrollTop();
if(scroll > 100){
if(!flag){
$("#logo").css({"width": "200px"});
$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color": "#fff", "box-shadow": "0 1px 1px #71e1b0"});
flag = true;
}
}else{
if(flag){
$("#logo").css({"width": "400px",});
$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color":"transparent", "box-shadow": "none"});
flag = false;
}
}
});
});
This is the website: http://marsurftours.com/. I've tried everything and spent many hours trying to find a solution. If you know how to solve this issue, I would appreciate it. Thanks for the help!

I think you forgot to add js/ before menu.js
So instead
<script src="menu.js"></script>
Try
<script src="js/menu.js"></script>

You are trying to link a file in system storage , you need to link a url
example: www.stackoverflow.com/navigation.js

Create an arrow-bar in HTML/CSS/JS

I am trying to create a progress arrow-bar which looks like similar to the image above. I started with a bar of columns (four col-sm-4) and do not know where to go from there.

I made (inspired by this post) a div with the shape you want:
.container{
width: 100%;
position: relative;
display: flex;
flex-direction: row;
}
.v-div {
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
border-left: 25px solid #f00;
}
.box{
height: 80px;
width: 320px;
background: red;
}
<div class="container">
<div class="box">
</div>
<div class="v-div">
</div>
</div>
Have a few of them overlap and you should be good to go!

A solution with :before and :after
.arrow {
font-size: 0;
}
.inner-arrow {
width:210px;
height:80px;
display: inline-block;
background-color:green;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:80px;
vertical-align: middle;
}
.arrow:before,
.arrow:after {
content:'';
display: inline-block;
width:0;
height:0;
border:40px solid transparent;
vertical-align: middle;
}
.arrow:before {
border-top-color: green;
border-bottom-color: green;
border-right-color: green;
}
.arrow:after {
border-left-color: green;
}
<div class="arrow">
<div class="inner-arrow">Next step</div>
</div>

For someone else stumbling onto this post and looking for something slighly different.
This is another solution that looks good
Using: transform, border and box-shadow - along with a little creative positioning and size adjustments
.locbar {
border-radius:5px;
border:1px solid #ccc;
background-color:#fff;
height:35px;
padding-left:10px;
}
.item {
float:left;
display:inline-block;
line-height:35px;
padding-left:5px;
font-family:Arial;
}
.arrow {
float:left;
position:relative;
transform:rotate(-45deg) skew(-15deg, -15deg);
display:inline-block;
box-shadow:1px 1px 3px 0px rgba(0,0,0,0.15);
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
width:19px;
height:19px;
top:8px;
left:-8px;
}
<div class='locbar'>
<div class='item'>
Products
</div>
<div class='arrow'></div>
<div class='item'>
Electronics
</div>
<div class='arrow'></div>
<div class='item'>
LED Televisions
</div>
</div>

You can achieve this by using css pseudo elements :before and after.
Check the below snippet:
ul{
padding:0;
list-style-type: none;
border:1px solid #ccc;
}
ul:before,ul:after{
content:"";
display:table;
}
ul:after{
clear:both;
}
ul li {
display: inline-block;
width: 25%;
float: left;
text-align: center;
text-transform: uppercase;
font-size: 10px;
font-family: sans-serif;
}
ul li.active {
background: forestgreen;
color: #fff;
}
ul li a {
padding: 0 12px;
height: 40px;
line-height: 40px;
position: relative;
display: block;
}
ul li.active a:before,ul li.active a:after{
content: "";
position: absolute;
border-style: solid;
border-color: transparent transparent transparent white;
border-width: 20px;
left: 0px;
}
ul li.active a:after{
content: "";
right: -40px;
left: auto;
border-color: transparent transparent transparent forestgreen;
}
ul li.active a {
padding-left: 30px;
}
<ul>
<li><a>job post</a></li>
<li class="active"><a>invite</a></li>
<li><a>review</a></li>
<li><a>hire</a></li>
</ul>

How to to reposition the unordered list element <li> in dropdown menu so it will display in the dropdown column

The li elements not in the dropdown box
Please help me to reposition the unordered list element <li> in dropdown menu so it will display in the dropdown column.
Below my HTML and CSS code:
body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
margin:0;
}
img {
width: auto;
max-height: 100%;
}
/* Navigation Bar */
#menu {
list-style:none;
margin: 50px auto auto auto;
position: fixed;
top: -50px;
background: #1a1a1a;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: #1a1a1a;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
body {behavior: url("csshover3.htc");}
#menu li .drop {
background:url("img/drop.gif")
no-repeat right 8px;
}
#menu li {
border-style: none;
border-color: inherit;
border-width: medium;
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:15px;
top: -3px;
left: 368px;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}
h1.header-line, h2.header-line,
h3.header-line, h4.header-line,
h5.header-line, h6.header-line{
padding-bottom: 21px;
margin-bottom: 11px;
position:relative;
}
/* Drop Down */
.dropdown_1column, .dropdown_2columns,
.dropdown_3columns, .dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
/* Columns */
.col_1,.col_2,.col_3,.col_4,.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:150px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
.col_1 ul li {
float:right;
display:inline;
}
/* Right alignment */
#menu .menu_right {
float:right;
margin-right:200px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
/* text-shadow: 1px 1px 1px #FFFFFF; */
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
<div>
<ul id="menu" style="height: 55px; z-index: 100; left: 1px;">
<li style="text-align: left; top: -3px; left: 6px; width: 160px; ">
<a class="drop" style="font-size: x-large"> ☰ Menu</a>
<div class="dropdown_5columns">
<!-- Begin 4 columns container -->
<div class="col_5">
<h3 style="text-align:center">INFORMATION TECHNOLOGY</h3>
</div>
<div class="col_1">
<h3>Home</h3>
<ul>
<li>IT Home</li>
<li>IT Online Application</li>
<li>Silt Intranet</li>
<li>Silt.com</li>
</ul>
</div>
<div class="col_1">
<h3>Training Guide</h3>
<ul>
<li>Email</li>
<li>Meeting Room</li>
<li>IT Orentiation Guide</li>
<li>KingSoft</li>
<li>Security Awareness</li>
</ul>
</div>
<div class="col_1">
<h3>Organization</h3>
<ul>
<li>Organization Chart</li>
<li>*****</li>
</ul>
</div>
<div class="col_1">
<h3>Policies & Procedure</h3>
<ul>
<li>Policies</li>
<li>Mailbox Quota</li>
<li>Escalation</li>
<li>DRP</li>
</ul>
</div>
</div>
</li>
<li class="auto-style1">Welcome to IT Portal</li>
</ul>
</div>
I don't know how to re-position the <li> element so it will display in the drop down column. Now my <li> elements display out of the drop down column to the center of the page.

Just Add left:0 in #menu li ul li class and it's work
body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
margin:0;
}
img {
width: auto;
max-height: 100%;
}
/* Navigation Bar */
#menu {
list-style:none;
margin: 50px auto auto auto;
position: fixed; /* Set the navbar to fixed position */
top: -50px; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
/* Background color and gradients */
background: #1a1a1a;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: #1a1a1a;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
body {behavior: url("csshover3.htc");}
#menu li .drop {
background:url("img/drop.gif")
no-repeat right 8px;
}
#menu li {
border-style: none;
border-color: inherit;
border-width: medium;
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:15px;
top: -3px;
left: 368px;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}
h1.header-line,
h2.header-line,
h3.header-line,
h4.header-line,
h5.header-line,
h6.header-line{
padding-bottom: 21px;
margin-bottom: 11px;
position:relative;
}
/* Drop Down */
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
/* Columns */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:150px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
.col_1 ul li {
float:right;
display:inline;
}
/* Right alignment */
#menu .menu_right {
float:right;
margin-right:200px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
/* text-shadow: 1px 1px 1px #FFFFFF; */
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
left:0;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
}
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
<div>
<ul id="menu" style="height: 55px; z-index: 100; left: 1px;">
<li style="text-align: left; top: -3px; left: 6px; width: 160px; ">
<a class="drop" style="font-size: x-large">☰ Menu </a>
<div class="dropdown_5columns">
<!-- Begin 4 columns container -->
<div class="col_5">
<h3 style="text-align:center">INFORMATION TECHNOLOGY</h3>
</div>
<div class="col_1">
<h3>Home</h3>
<ul>
<li>IT Home</li>
<li>IT Online Application</li>
<li>Silt Intranet</li>
<li>Silt.com</li>
</ul>
</div>
<div class="col_1">
<h3>Training Guide</h3>
<ul>
<li>Email</li>
<li>Meeting Room</li>
<li>IT Orentiation Guide</li>
<li>KingSoft</li>
<li>Security Awareness</li>
</ul>
</div>
<div class="col_1">
<h3>Organization</h3>
<ul>
<li>Organization Chart</li>
<li>*****</li>
</ul>
</div>
<div class="col_1">
<h3>Policies & Procedure</h3>
<ul>
<li>Policies</li>
<li>Mailbox Quota</li>
<li>Escalation</li>
<li>DRP</li>
</ul>
</div>
</div>
</li>
<li class="auto-style1">Welcome to IT Portal</li>
</ul>
</div>

How to build Menu bar with bottom border / box shadow in border?

I built a menu and I did box-shadow in the top of the menu and when it hover. But I still want that the box shadow will be fixed for the floor of the menu.
HTML:
<body>
<div class="head">
<ul id="menu">
<li><a class="active" href="index.html">Home</a></li>
<li>About</li>
<li> Buy</li>
<li>Media</li>
<li>Support</li>
<li class="border"></a>
</ul>
<div id="logo">TheCsgo</div>
</div>
</body>
CSS:
body {
direction:rtl;
margin:0;
padding:0;
font-family: 'Open Sans Hebrew', sans-serif;
background-image:url('http://on-winning.com/wp-content/uploads/2016/01/J3jrEQs.jpg');
}
.head {
background-color:#2980b9;
width:100%;
height:100px;
}
#menu{
margin:0;
padding:0;
list-style-type;
none;
}
#menu li {
display:inline;
float:right;
padding-right:60px;
}
#menu li a {
display:block;
padding-top:38px;
color:#FFFFFF;
text-decoration:none;
font-size:16px; transition: 0.3s ease-out;
box-shadow:inset 0px 4px #2980b9;
}
#menu li a:hover {
box-shadow:inset 0px 4px #FFFFFF;
}
#menu li a.active {
box-shadow:inset 0px 4px #FFFFFF;
}
#logo {
margin-left:30px;
float:left;color:#FFFFFF;
font-size:52px;
margin-top:10px;
}
.body2 {
width:1300px;
height:800px;
background-color:#2980b9;
opacity: 0.8;
margin:auto;
display:block;
margin-top:35px;
color:#FFFFFF;
direction:rtl;
}
.body2 p {
font-size:16px;
padding-right:15px;
}
Full code

you may use multiple shadow and use line-height to size the height of your links:
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
/* Index page */
html {
margin: 0;
direction: rtl;
font-family: 'Open Sans Hebrew', sans-serif;
}
body {
direction: rtl;
margin: 0;
padding: 0;
font-family: 'Open Sans Hebrew', sans-serif;
background-image: url('http://on-winning.com/wp-content/uploads/2016/01/J3jrEQs.jpg');
}
.head {
background-color: #2980b9;
width: 100%;
overflow:hidden;
}
#menu {
margin: 0;
padding: 0;
}
#menu li {
display: inline;/* kills the bullet*/
float: right;
padding-right: 40px;
}
#menu li a {
display: block;
line-height:100px;
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
padding:0 1em;
transition: 0.3s ease-out;
box-shadow: inset 0px 4px #2980b9, inset 0px -4px #2980b9;
}
#menu li a:hover,
#menu li a.active{
box-shadow: inset 0px 4px #FFFFFF,inset 0px -4px #FFFFFF;
}
#logo {
margin-left: 30px;
float: left;
color: #FFFFFF;
font-size: 52px;
margin-top: 10px;
}
<div class="head">
<ul id="menu">
<li><a class="active" href="index.html">Home</a>
</li>
<li>About
</li>
<li> Buy
</li>
<li>Media
</li>
<li>Support
</li>
</ul>
<div id="logo">TheCsgo</div>
</div>
https://jsfiddle.net/71q10huy/1/
you could also use flex and justify-content to keep every elements on a single line and let spacing in between elements care of themselves. https://jsfiddle.net/71q10huy/3/
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
/* Index page */
html {
margin: 0;
direction: rtl;
font-family: 'Open Sans Hebrew', sans-serif;
}
body {
direction: rtl;
margin: 0;
padding: 0;
font-family: 'Open Sans Hebrew', sans-serif;
background-image: url('http://on-winning.com/wp-content/uploads/2016/01/J3jrEQs.jpg');
}
.head {
background-color: #2980b9;
width: 100%;overflow:hidden;
}
.head, #menu {
margin: 0;
padding: 0;
display:flex;
flex:1;
flex-flow:row reverse;
justify-content:space-between;
list-style-type:none;
}
#menu {
margin-left:15%
}
#menu li a {
display: block;
line-height:100px;
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
padding:0 1em;
transition: 0.3s ease-out;
box-shadow: inset 0px 4px #2980b9, inset 0px -4px #2980b9;
}
#menu li a:hover,
#menu li a.active{
box-shadow: inset 0px 4px #FFFFFF,inset 0px -4px #FFFFFF;
}
#logo {
margin-left: 30px;
float: left;
color: #FFFFFF;
font-size: 52px;
margin-top: 10px;
}
<body>
<div class="head">
<ul id="menu">
<li><a class="active" href="index.html">Home</a></li>
<li>About</li>
<li> Buy</li>
<li>Media</li>
<li>Support</li>
</ul>
<div id="logo">TheCsgo</div>
</div>
</body>

Expand Collapse Menu on Mobile While Maintaining Hover on Desktop

I have a html page on my desktop that uses a vertical sliding menu on hover. On an iPad I can click the menu to expand it, but I can't figure out how to make it collapse. I have tried using jquery but I can't seem to make it work. Here is the code I am starting with.
#navigation_slideout {
position: fixed;
top: 80px;
left: -370px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;
}
#navigation_slideout:hover {
left: -39px;
}
#navigation_slideout ul
{
list-style: none;
}
#navigation_slideout ul li {
background: #548EBE;
width: 325px;
height: 30px;
text-align: left;
padding-top: 5px;
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#navigation_slideout ul li a{
color: #000;
text-decoration: none;
font-weight:bold;
display: block;
background-color:#548EBE;
color:white;
}
#navigation_slideout ul li ul{
width:285px;
}
#navigation_slideout ul li ul li {
width:10px;
position:relative;
left:-41px;
}
#navigation_slideout ul li ul li a {
background:#548EBE;
width:326px;
height:30px;
text-align:left;
padding-top:5px;
font-family: helvetica, arial, sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#menu{
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14pt;
color:white;
font-weight:bold;
margin:0px 0px 0px 0px;
right:0px;
padding:0px 0px 0px 0px
}
#menu a{
font-size: 14pt;
color:white;
font-weight:bold;
text-decoration:none;
}
table.nospacing {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
table.nospacing th, td {
padding: 0;
}
.menu-col{max-width: 30px;}
<div id="navigation_slideout" style="background-color:#548EBE;z-index:1" >
<table class="nospacing" style="border-style:none">
<tr>
<td>
<ul>
<li> Home</li>
<li> About</li>
<li><a href="contact/default.html" > Contacts</a></li>
<li><a href="faq/default.html" > FAQs</a></li>
</ul>
<hr width="200px"/>
<ul>
<!-- #BeginEditable "redlines" -->
<li style="display:none"> Redlines</li>
<!-- #EndEditable -->
</ul>
</td>
<td class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid"><p id="menu">MENU</p></td>
</tr>
</table>

iDevices have a wierd thing where where the hover state persists. I fixed this by adding hover classes. If you are using jquery you can do this...
elem.on('mouseenter', function () {
$(this).addClass('hover');
}
elem.on('mouseleave', function () {
$(this).removeClass('hover');
}
there are other fixes aswell...
http://davidwalsh.name/ios-hover-menu-fix
http://www.slickmedia.co.uk/news/blog/glenns-blog/fix-ipad-iphone-css-hover-issues/

We Keep Coding

JavaScript is the programming language of the Web.

navigation on media cant get 100% width - javascript

Add box-sizing: border-box; for nav. ul tag is missing in your html. Also make sure to remove the default padding and margin for ul. nav ul{ padding: 0; margin:0;} To stretch menu to full width of the window, apply the bg colour for nav, Or remove the padding:10px from nav.

Related

Hambuerguer menu not working online but working in xampp/localhost

Create an arrow-bar in HTML/CSS/JS

How to to reposition the unordered list element <li> in dropdown menu so it will display in the dropdown column

How to build Menu bar with bottom border / box shadow in border?

Expand Collapse Menu on Mobile While Maintaining Hover on Desktop

Categories

Resources