Related
I am building a joomla template using built in bootstrap version 2.3.2. The problem is i have long navbar when it comes on tablets, it divide in two lines i would like to have it collapse at 1200px. I am using following code for navigation.
<?php
defined('_JEXEC') or die;
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load optional rtl Bootstrap css and Bootstrap bugfixes
JHtmlBootstrap::loadCss($includeMaincss = true);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<link href="templates/test/css/template.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row-fluid">
<div id="logo" class="span12"><img src="templates/test/images/logo.png" alt="Home - Freeterm Limited, London"></div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<nav class="span12 navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse"><jdoc:include type="modules" name="nav" style="none" /></div>
</div>
</nav>
</div></div>
The CSS is as below:
.navbar {
margin: 0px;
}
.navbar-inner {
min-height: 40px;
padding-left: 0px;
padding-right: 0px;
background-color: #363f45;
background-image: -moz-linear-gradient(top, #363f45, #363f45);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#363f45), to(#363f45));
background-image: -webkit-linear-gradient(top, #363f45, #363f45);
background-image: -o-linear-gradient(top, #363f45, #363f45);
background-image: linear-gradient(to bottom, #363f45, #363f45);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff363f45', endColorstr='#ff363f45', GradientType=0);
border: 0px solid #d4d4d4;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
}
/* ----- Main Menu Styling ----- */
.navbar .nav > li > a {
font-family: 'helvetica', sans-serif;
color: #fff;
text-shadow: none;
line-height: 80px;
padding: 0 30px 0 30px;
border-left: 1px solid #21262b;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #fff;
background-color: #8dbf41;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #fff;
background-color: #8dbf41;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar .nav li.item-101 a {
border-left: none;
}
/*----- Drop Menu -----*/
nav .nav-child {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 0px 0;
margin: 0;
list-style: none;
background-color: #363f45;
border: 0px solid #ccc;
border: 0px solid rgba(0,0,0,0.2);
*border-right-width: 0px;
*border-bottom-width: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0 px 0px rgba(0,0,0,0);
box-shadow: 0 px 0px rgba(0,0,0,0);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
nav .nav-child.pull-right {
right: 0;
left: auto;
}
nav .nav-child .divider {
*width: 100%;
height: 1px;
margin: 8px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #fff;
}
nav .nav-child a {
display: block;
padding: 0px 20px;
clear: both;
font-size: 13px;
font-family: 'helvetica', sans-serif;
text-transform: uppercase;
height: 50px;
line-height: 50px;
color: #fff;
border: none;
white-space: nowrap;
}
nav .nav > li {
position: relative;
}
nav .nav > li:hover > .nav-child,
nav .nav > li > a:focus + .nav-child {
display: block;
}
nav .nav-child li > a:hover,
nav .nav-child li > a:focus,
nav .nav-child:hover > a {
text-decoration: none;
color: #fff;
background-color: #8dbf41;
}
/*----- Nav Bar Button -----*/
.navbar .btn-navbar {
float: right;
padding: 10px 10px;
margin: 20px;
margin-left: 5px;
color: #ffffff;
text-shadow: 0 0px 0 rgba(0, 0, 0, 0);
background-color: #363f45;
*background-color: #363f45;
background-image: -moz-linear-gradient(top, #363f45, #363f45);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#363f45), to(#363f45));
background-image: -webkit-linear-gradient(top, #363f45, #363f45);
background-image: -o-linear-gradient(top, #363f45, #363f45);
background-image: linear-gradient(to bottom, #363f45, #363f45);
background-repeat: repeat-x;
border-color: #363f45 #363f45 #363f45;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff363f45', endColorstr='#ff363f45', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
-moz-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
color: #ffffff;
background-color: #363f45;
*background-color: #363f45;
}
just add this in your css file
#media (max-width: 1000px) {
.navbar-header {
float: none !important;
}
.navbar-default {
background-color: #222 !important;
border-color: transparent;
padding:0px !important;
}
.nav > li {
display: block !important;
position: relative;
}
.navbar-left, .navbar-right {
float: none !important;
}
.navbar-nav > li.navbar-right {
float: none !important;
}
.navbar{
min-height:50px;
position:relative;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block !important;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none !important;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
I'm using this:
jsfiddle.net/wromLbq5
And am hoping to have the ability to have multiple accordion sections open at once, and on page load. By this I mean, when one opens, I don't want the other to close. Is this possible? Without javascript as well.
(Ignore all the sub accordions too- I only need one layer)
HTML
<ul class="accordion">
<li id="one" class="files">
My Files<span>495</span>
<ul class="sub-menu">
<li><em>01</em>Dropbox<span>42</span></li>
<li><em>02</em>Skydrive<span>87</span></li>
<li><em>03</em>FTP Server<span>366</span></li>
<li><em>01</em>Dropbox<span>42</span></li>
<li><em>01</em>Dropbox<span>42</span></li>
</ul>
</li>
<li id="two" class="mail">
Mail<span>26</span>
<ul class="sub-menu">
<li><em>01</em>Hotmail<span>9</span></li>
<li><em>02</em>Yahoo<span>14</span></li>
<li><em>03</em>Gmail<span>3</span></li>
</ul>
</li>
<li id="three" class="cloud">
Cloud<span>58</span>
<ul class="sub-menu">
<li><em>01</em>Connect<span>12</span></li>
<li><em>02</em>Profiles<span>19</span></li>
<li><em>03</em>Options<span>27</span></li>
</ul>
</li>
<li id="four" class="sign">
Sign Out
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
CSS
body {margin:50px;}
/* Reset */
.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.accordion li {
list-style: none;
}
/* Layout & Style */
.accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 10px 0 40px;
height: 32px;
color: #fdfdfd;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion > li:hover > a,
.accordion > li:target > a {
color: #3e5706;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);
/*background: url(../img/active.png) repeat-x;*/
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
}
.accordion li > a span {
display: block;
position: absolute;
top: 7px;
right: 0;
padding: 0 10px;
margin-right: 10px;
font: normal bold 12px/18px Arial, sans-serif;
background: #404247;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion > li:hover > a span,
.accordion > li:target > a span {
color: #fdfdfd;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #3e5706;
}
/* Images */
.accordion > li > a:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 24px;
height: 24px;
margin: 4px 8px;
background-repeat: no-repeat;
background-image: url(http://designmodo.com/demo/css3accordionmenu/img/icons.png);
background-position: 0px 0px;
}
.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before { background-position: 0px -24px; }
.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before { background-position: -24px -24px; }
.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before { background-position: -48px -24px; }
.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before { background-position: -72px -24px; }
/* Sub Menu */
.sub-menu li a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.sub-menu li:hover a { background: #efefef; }
.sub-menu li:last-child a { border: none; }
.sub-menu li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sub-menu em {
position: absolute;
top: 0;
left: 0;
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif;
}
/* Functionality */
.accordion li > .sub-menu li {
height: 0;
overflow: hidden;
-webkit-transition: height .2s ease-in-out;
-moz-transition: height .2s ease-in-out;
-o-transition: height .2s ease-in-out;
-ms-transition: height .2s ease-in-out;
transition: height .2s ease-in-out;
}
.accordion li:target > .sub-menu li {
height: 33px;
}
I'm trying to avoid any java script.
Is this possible?
No this is not possible with only css, because your example uses the CSS3 :target selector. When you click on another item the target changes.
You cannot set state with css but you can style it. If you would like to keep each section open after clicking you would have to use javascript, but you don't need jQuery
If you would like to use javascript, this mimics the css as closely as possible while allowing the accordions to stay open. To close the accordion simply click on the title again.
var lists = document.querySelectorAll('.accordion > li > a'); // get list title links
for (var i = 0; i < lists.length; i++) { // for each list title link
lists[i].href = "javascript:void()"; // stop the page from jumping
lists[i].onclick = function(e) { // when you click the link
var items = e.target.parentNode.querySelectorAll('li'); // get all list items that are siblings of the clicked link
for (var x = 0; x < items.length; x++) { // for each list item
if (items[x].style.height != '33px') { // if its not open
items[x].style.height = '33px'; // open it
} else { // otherwise
items[x].style.height = '0px'; // close it
}
}
};
}
Wrap this in a script tag then either drop it in at the bottom of the body, or wrap it in document.onload = function() { /* Script Here */ }
(Demo)
Note while any style with the :target selector will cease to have effect, you should leave them in the css as a fallback in case the user has javascript disabled.
This css is showing all of the accordions as closed using this style:
.accordion li > .sub-menu li {
height: 0px;
}
You could set it to 33px to show all open when the page opens - but that would break the functionality as it is the :target selector which then sets the height and thus causes the selected section to show as open.
The only solution is to move into javascript.....
Can it be done? Yes
Do you need to change your HTML? Yes
Is it pretty? No
Basically instead of Target maintaining state. Use a checkbox replacing you top level a tags with label.
body {margin:50px;}
/* Reset */
.accordion,
.accordion ul,
.accordion li,
.accordion label,
.accordion span {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.accordion li {
list-style: none;
}
.accordion input[type="checkbox"]{display:none;}
/* Layout & Style */
.accordion li > label, .accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 10px 0 40px;
height: 32px;
color: #fdfdfd;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion > li:hover > label,
.accordion > li:target > label,
.accordion > li > input[type="checkbox"]:checked ~ label{
color: #3e5706;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);
/*background: url(../img/active.png) repeat-x;*/
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
}
.accordion li > label span, .accordion li > a span {
display: block;
position: absolute;
top: 7px;
right: 0;
padding: 0 10px;
margin-right: 10px;
font: normal bold 12px/18px Arial, sans-serif;
background: #404247;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion > li:hover > label span,
.accordion > li:target > label span,
.accordion > li > input[type="checkbox"]:checked ~ label span{
color: #fdfdfd;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #3e5706;
}
/* Images */
.accordion > li > label:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 24px;
height: 24px;
margin: 4px 8px;
background-repeat: no-repeat;
background-image: url(http://designmodo.com/demo/css3accordionmenu/img/icons.png);
background-position: 0px 0px;
}
.accordion li.files > label:before { background-position: 0px 0px; }
.accordion li.files:hover > labe:before,
.accordion li.files:target > label:before { background-position: 0px -24px; }
.accordion li.mail > label:before { background-position: -24px 0px; }
.accordion li.mail:hover > label:before,
.accordion li.mail:target > label:before { background-position: -24px -24px; }
.accordion li.cloud > label:before { background-position: -48px 0px; }
.accordion li.cloud:hover > label:before,
.accordion input[type="checkbox"]:checked:before { background-position: -48px -24px; }
.accordion li.sign > label:before { background-position: -72px 0px; }
.accordion li.sign:hover > label:before,
.accordion input[type="checkbox"]:checked:before { background-position: -72px -24px; }
/* Sub Menu */
.sub-menu li > a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.sub-menu li:hover a { background: #efefef; }
.sub-menu li:last-child a { border: none; }
.sub-menu li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sub-menu em {
position: absolute;
top: 0;
left: 0;
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif;
}
/* Functionality */
.accordion li > .sub-menu li {
height: 0;
overflow: hidden;
-webkit-transition: height .2s ease-in-out;
-moz-transition: height .2s ease-in-out;
-o-transition: height .2s ease-in-out;
-ms-transition: height .2s ease-in-out;
transition: height .2s ease-in-out;
}
.accordion input[type="checkbox"]:checked ~ .sub-menu li {
height: 33px;
}
<ul class="accordion">
<li id="one" class="files">
<input type="checkBox" id="cbOne" checked="checked" /><label for="cbOne" >My Files<span>495</span></label>
<ul class="sub-menu">
<li><em>01</em>Dropbox<span>42</span></li>
<li><em>02</em>Skydrive<span>87</span></li>
<li><em>03</em>FTP Server<span>366</span></li>
<li><em>01</em>Dropbox<span>42</span></li>
<li><em>01</em>Dropbox<span>42</span></li>
</ul>
</li>
<li id="two" class="mail">
<input type="checkBox" id="cbTwo" checked="checked" /><label for="cbTwo" >Mail<span>26</span></label>
<ul class="sub-menu">
<li><em>01</em>Hotmail<span>9</span></li>
<li><em>02</em>Yahoo<span>14</span></li>
<li><em>03</em>Gmail<span>3</span></li>
</ul>
</li>
<li id="three" class="cloud">
<input type="checkBox" id="cbThree" checked="checked" /><label for="cbThree" >Cloud<span>58</span></label>
<ul class="sub-menu">
<li><em>01</em>Connect<span>12</span></li>
<li><em>02</em>Profiles<span>19</span></li>
<li><em>03</em>Options<span>27</span></li>
</ul>
</li>
<li id="four" class="sign">
<input type="checkBox" id="cbFour" checked="checked" /><label for="cbFour" >Sign Out</label>
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
Look Ma! No Javascript!
I have been facing problem for my horizontal menu bar code.
This menu bar displays correctly for 1366 x 768 resolution
but after pressing ctrl - short key
when I reduce browser size using ctrl - short key my menus come down. I have tried both em and px units to be used for this problem but it does not seem to solve the problem. I want to clarify that menu bar must be in center as the other things in whole page and should be expanded for the whole 960px setting for wrapper. I need help for sorting out this problem.
Below is my source code
HTML
<nav>
<div class="nav_wrapper">
<div class="menu_box">
<div id='cssmenu'>
<ul>
<li><span>Home</span></li>
<li><a href='#'><span>About Us</span></a></li>
<li><a href='#'><span>Courses</span></a>
<ul>
<li><a href='index.php'>AGP Program</a></li>
<li><a href='index.php'>Web Program</a></li>
</ul>
</li>
<li><a href='#'><span>Partners</span></a></li>
<li><a href='#'><span>Consultancy</span></a></li>
<li><a href='#'><span>News n Events</span></a></li>
<li><a href='#'><span>Gallery</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
</nav>
CSS
/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Arial', sans-serif;
letter-spacing:0.4px;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.5;
}
#cssmenu {
width: 100%;
background: #fff;
}
#cssmenu > ul {
border: 1px solid #000000;
margin-left:auto;
margin-right:auto;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
}
#cssmenu > ul:after {
clear: both;
content: '';
display: table;
}
#media all and (max-width: 480px) {
#cssmenu > ul {
max-height: 32px;
overflow: hidden;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
#cssmenu.expand ul {
max-height: 900px;
}
}
#cssmenu > ul > li {
border-right: 1px solid #000000;
-moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
float: left;
}
#cssmenu > ul > li.mobile {
display: none;
}
#cssmenu > ul > li.active {
background: #444444;
background: -moz-linear-gradient(#444444 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #323232));
background: -webkit-linear-gradient(#444444 0%, #323232 100%);
background: linear-gradient(#444444 0%, #323232 100%);
}
#media all and (max-width: 480px) {
#cssmenu > ul > li {
border-right:1px solid #000000;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
display: block;
float: none;
}
#cssmenu > ul > li.mobile {
display: block;
}
#cssmenu > ul > li.mobile i {
float: right;
font-style: normal;
}
}
#cssmenu > ul > li:last-child {
border-right: 0px solid #000000;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
-webkit-border-radius: 0 0px 4px 0;
-moz-border-radius: 0 0px 4px 0;
border-radius: 0px;
}
#cssmenu > ul > li:last-child ul {
left: auto;
right: 0;
}
#cssmenu > ul > li.mobile {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
}
#cssmenu > ul > li > a {
margin: 0 0 2px 0;
font-size: 12px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
}
#cssmenu > ul > li > a > span {
display: block;
padding: 6px 2.61em;
font-weight: bold;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
text-shadow: 0 1px 1px #000;
}
/* Sub menu */
#cssmenu ul ul {
background: linear-gradient(to bottom, #333333 0%, #000000 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid #e5e5e5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
padding: 5px 12px;
display: none;
position: absolute;
top: 33px;
left: 0;
width: 110px;
z-index: 1;
}
#media all and (max-width: 480px) {
#cssmenu ul ul {
position: relative;
top: 0;
width: 92%;
}
}
#cssmenu ul ul li {
padding: 3px 0;
}
#cssmenu ul ul a {
color: #999999;
display: block;
font-size: 12px;
font-weight: bold;
}
#cssmenu ul ul li a:hover {
color: #ffffff;
}
/* Menus */
#media only screen and (min-width: 1000px)
{
.middle_section{
width:100%;
background-color:#D6D6D6;
/* background:linear-gradient(to bottom, #C40302 0%, #9E0302 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); */
}
nav{
background: linear-gradient(#565656 0%, #323232 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
clear: both;
padding-bottom:10px;
padding-top:10px;
position: relative;
width:100%;
}
.nav_wrapper{
background: linear-gradient(#565656 0%, #323232 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
width:960px;
margin-left:auto;
margin-right:auto;
}
}
This might be simply solved by adding min-width to on of the wraping elements, in this case I finde it to work better when applied to "nav_wrapper". Also, when working with an element bigger than the display, it's good to have no margin in the body element, so I changed that too.
Here's the changes I made
CSS
body{
margin: 0px;
}
.nav_wrapper{
min-width: 980px;
}
LIVE DEMO
I am using this tutorial for a css menu online and it works perfectly, but it does not stretch the full width of the page: http://www.red-team-design.com/css3-animated-dropdown-menu
Here is what it looks like:
I tried changing the width: 100% and that helped extend it but not full width. I even did what this user did Here but that did not work either. This needs to work on IE 8 as well as firefox so that is bringing up more issues there.
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
Any help is appreciated!
The space is because of the default margin and padding for BODY Tag.
From the comment,
Add below css
body { margin: 0; padding: 0; }
And also remove margin and set width to 100% in the define style #menu
margin: 60px auto;
width: 960px;
set this in your style sheet
html,body{
width:100%;
height:100%;
margin:0
padding:0;
}
Why you need this ?? because when you set the container dimension in percentage, it always looks for its parents dimension to calculate its percentage value.....
if you set #cont width in percentage...then #cont width is dependent on body width,SO, for markup
<html>
<head></head>
<body>
<div id="cont">
</div>
</body>
</html>
with
#cont
{
width:80%
}
then it would mean that
#cont = 80% of body
so #cont would fail, if body has no width set.
It is because the body has a margin by default.
Remove the default by adding body { margin: 0px; } to your CSS (and the #menu { width: 100%; }) of course.
You can use this:
Body,ul,li{margin:0;padding:0}
#cont{
width:100%;
float:right;
height:120px;
}
I was working on web project, then a requirement came that I should add a top-level menu to my site. So I did a search and I found a menu from this URL http://www.webdesignerdepot.com/2012/08/create-a-stunning-menu-in-css3/.
But when I added the required css files & font, then menu was displayed out of the layout as follow:-
So can anyone advise on how I can do the following :-
To expand the menu horizontally to cover the whole screen .as for the top blue-colored area.
to have it exeactly below the blue-colored top area.
Reduce the menu width, and have it same as the breadcrumb.
Thanks
the css for the menu is :-
.clearfix {
clear: both;
}
.wrap {
width: 940px;
margin: 4em auto;
}
nav {
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background-image: linear-gradient(#fff, #ccc);
border-radius: 6px;
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
padding: 0 10px;
position: relative;
}
.menu li {
float: left;
position: relative;
}
.menu li a {
color: #444;
display: block;
font-size: 14px;
line-height: 20px;
padding: 6px 12px;
margin: 8px 8px;
vertical-align: middle;
text-decoration: none;
}
.menu li a:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
background-image: linear-gradient(#ededed, #fff);
border-radius: 12px;
box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
color: #222;
}
/* Dropdown styles */
.menu ul {
position: absolute;
left: -9999px;
list-style: none;
opacity: 0;
transition: opacity 1s ease;
}
.menu ul li {
float: none;
}
.menu ul a {
white-space: nowrap;
}
/* Displays the dropdown on hover and moves back into position */
.menu li:hover ul {
background: rgba(255,255,255,0.7);
border-radius: 0 0 6px 6px;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
left: 5px;
opacity: 1;
}
/* Persistant Hover State */
.menu li:hover a {
background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
background-image: linear-gradient(#ccc, #ededed);
border-radius: 12px;
box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
color: #222;
}
.menu li:hover ul a {
background: none;
border-radius: 0;
box-shadow: none;
}
.menu li:hover ul li a:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));
background-image: linear-gradient(#ededed, #fff);
border-radius: 12px;
box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
}
#font-face {
font-family: 'IconicStroke';
src: url("~/fonts/iconic/iconic_stroke.eot");
src: local('IconicStroke'),
url("~/fonts/iconic/iconic_stroke.svg#iconic") format('svg'),
url("~/fonts/iconic/iconic_stroke.otf") format('opentype');
}
.iconic {
color:inherit;
font-family: "IconicStroke";
font-size: 38px;
line-height: 20px;
vertical-align: middle;
}
a.iconic:hover {
color:inherit;
}
My advice! Use firebug(an addon of firefox). Click on the menu and it will open all the css. Try changing them dynamically and chk the changes instantly. It even gives you the file where you need to make changes.
Apart from that what john said is right. Using fluid layout(%) is better than rigid(px). So when you say you need Menu to be of size of page then just make it 100%.
Happy Coding!