I am new on this forum.
I am developing a website using HTML5 and CSS with responsive design. I have a navigation menu which behaves as a simple drop down menu for desktop and laptop
but for tablet and mobile it has a menu button
By clicking on the menu button, it alternatively appear and disappear with display:blocks otherwise display:none and pushes the contents of main area downward
All works fine in Firefox, Chrome and IE but It is not pushing the contents down in IE7
I am stuck here since two days
Here is my HTML Code
<div id="wrapper">
<header id="topHeader">
<div id="topDiv">
<div id="mainDiv">
<div id="logo">
<div itemscope itemtype="http://schema.org/Organization"> <a itemprop="url" href="/Default.aspx"> <img itemprop="logo" src="/App_Themes/Default/Images//logo.png" alt=""> </a> </div>
</div>
<div id="navDiv">
<nav id="nav">
<ul id="navigation">
<li id="mobileSignup"> <h3>Signup</h3>
</li>
<li><a href="/component/component-overview.aspx">
<h3>Components</h3>
</a></li>
<li><a href="/pricing.aspx">
<h3>Pricing</h3>
</a></li>
<li> <a href="/consulting/partners.aspx">
<h3>Partners</h3>
</a>
</li>
<li> <a href="/about/about-contact.aspx">
<h3> About ▾</h3>
</a>
<ul>
<li><a href="/about/blog.aspx" >
<h3>Blog</h3>
</a></li>
<li><a href="/about/about-contact.aspx" >
<h3>Contact</h3>
</a></li>
<li><a href="/about/about-FAQ.aspx" >
<h3>FAQ</h3>
</a></li>
<li><a href="/about/about-timeline.aspx" >
<h3>Timeline</h3>
</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="register">
<div id="contact">
<h5> <img src="/App_Themes/Default/Images/Phone.png" id="phoneImg" alt="" /><span id="phoneNumber"> 1 866 668 6402</span></h5>
</div>
<div id="signup"><img src="/App_Themes/Default/Images/SignUpbutton.png" id="signupImg" alt="">
<img src="/App_Themes/Default/Images/menuButton.png" alt="" id="menuButton">
</div>
<div id="login">
<h3>
Login
</h3>
</div>
</div>
</div>
</div>
</header>
</div>
<div id="container">
</div>
Here is my css code for desktop menu
/*===========================================================================
* Horizontal Navigation
* Setting up the nav in the middle of the mainDiv
=============================================================================*/
#navDiv {
display:inline;
position:absolute;
/*display:block;*/
margin-left:30px;
border:1px solid red;
}
/*===========================================================================
* Setting up the main menu at a margin of 20px from logo div
=============================================================================*/
#nav ul {
/*margin-left: 20px;*/
list-style-type:none;
list-style:none;
}
/*===========================================================================
* Setting up the list item as the main menu items
=============================================================================*/
ul#navigation li {
display:block;
float: left;
}
/*===========================================================================
* Setting up the margin, color, text-decoration and display style for main menu
=============================================================================*/
#nav > ul > li > a {
margin: 27px 15px 27px 15px;
color: #ffffff;
text-decoration: none;
display: block;
}
/*===========================================================================
* Changing the background image for main menu for hover effects
=============================================================================*/
#nav ul li:hover {
background: url("Images/MenuOnHover.png");
background-repeat: repeat-x;
}
/*===========================================================================
* Setting up the Drop Down Menus
* Making it visible for main menu hover effects
=============================================================================*/
#nav ul#navigation li ul {
display: none;
}
ul#navigation ul li {
clear: both;
width: 130px;
border: 0 none;
padding: 5px;
}
#nav ul#navigation li:hover > ul {
display: block;
opacity: 1;
}
/*===========================================================================
* Making basic decorations of drop down menu
=============================================================================*/
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0px;
padding: 5px;
position: absolute;
z-index: 99999;
width: 130px;
background: #f8f8f8;
box-shadow: 1px 1px 3px #ccc;
opacity: 0;
}
ul#navigation ul li {
clear: both;
width: 130px;
border: 0 none;
padding: 5px;
}
ul#navigation ul li a {
color: #000;
text-decoration: none;
}
ul#navigation ul li:hover {
background: #1E77A0;
text-decoration: none;
width: 125px;
}
ul#navigation ul li a:hover {
color: #fff;
}
/*===============================================================================
* menuButton for tablet and mobile, It is hidden by default
===============================================================================*/
#register #signup #menuButton {
display:none;
}
}
and here is my code for mobile menu
/*===========================================================================
* Vertical Navigation
* Setting up the nav in the middle of the mainDiv
=============================================================================*/
#navDiv {
float:left;
margin-top: 10px;
left: 0px;
width: 100%;
background: #161616;
display:none;
}
#nav {
width: 25%;
background: #161616;
}
#nav ul li {
list-style:none;
list-style-type:none;
position:relative;
}
#nav ul li h3 {
margin: 12px auto;
}
#nav ul li a {
text-decoration: none;
color:#fff;
}
#nav ul li:hover ul li {
margin:12px;
}
#nav ul li ul {
display: none;
opacity: 1;
}
#navigation li:hover > ul {
display: block;
margin: 15px 10px;
}
ul#navigation #mobileSignup {
display: block;
}
/*===========================================================================
* register div contains the signup and login div
* Setting up the register div position and text color
=============================================================================*/
#register {
position:absolute;
top: 1px;
right: 2%;
width:130px;
}
#register #contact {
float:left;
margin-top:15px;
margin-right:15px;
}
#register #contact #phoneNumber {
display:none;
}
#register #signup {
margin-top: 8px;
margin-left: 3%;
}
#register #signup #signupImg {
display:none;
}
#register #signup #menuButton {
display:inline;
margin-top:10px;
}
#register #login a {
margin-right:3%;
}
Please help me to find out this bug for IE7. Please it is an humble request that don't refer to JQuery or javascript based menu as I don't want to use them.
Related
I'm making a navigation menu.
I got it all working now but when the sub menu pops up all the html is distorting.
All the div's below are going downwards.
Is there somebody who can help me?
Here is the html with CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
#body
{
width: 1200px;
}
ul{
padding: 0;
list-style: none;
}
ul li{
float: left;
width: 100px;
text-align: center;
}
ul li a{
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
#uldiv
{
width:1200px;
float:left;
}
#secdiv
{
width:1200px;
float:left;
}
</style>
</head>
<body>
<div id="uldiv">
<ul>
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<div id="secdiv">
here some text whish will not move while the menu is popping up.
</div>
</body>
</html>
You need to add :
ul li:hover ul {
display: block; /* display the dropdown */
position:absolute; /* <--- this line */
}
To take the submenu out of the document flow and doesn't push the below content down.
You also need to add :
ul li ul li{
float:none;
}
So that the sub menu items don't display on the same line and stack below each other.
DEMO
Full code :
#body {
width: 1200px;
}
ul {
padding: 0;
list-style: none;
}
ul li {
float: left;
width: 100px;
text-align: center;
}
ul li a {
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
/* display the dropdown */
position:absolute;
}
ul li ul li{
float:none;
}
#uldiv {
width:1200px;
float:left;
}
#secdiv {
width:1200px;
float:left;
}
<div id="uldiv">
<ul>
<li>Home
</li>
<li>About
</li>
<li> Products
<ul>
<li>Laptops
</li>
<li>Monitors
</li>
<li>Printers
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<div id="secdiv">here some text whish will not move while the menu is popping up.</div>
Give position:absolute to the ul
Fiddle
ul li ul {
position:absolute;
display: none;
}
<div class="header">
<div id="navigation">
<div class="center">
<div class="logo"></div>
<ul class="right">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
------------------------C S S--------------------------------
#navigation {
position:fixed;
display:block;
top: 0;
width: 100%;
height:35px;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(1,1,1,0.8);
color:rgba(1,1,1,0.8);
border-bottom:1px solid black;
}
.center {width: 1000px; margin: 0 auto;}
div.logo {display:inline-block;
}
ul, li {
padding:0;
margin:0;
}
#navigation ul {
list-style: none;
float:right;
}
#navigation ul li {
display:inline;
}
#navigation a {
text-decoration:none;
font-size:14px;
padding: 0 15px;
color:white;
}
#navigation a:hover {
color: grey;
}
#content {
width: 800px;
margin: 0 auto;
margin-top: 80px;
}
an example would be like this
fiddle
you can modify the code for you
HTML:
<div class="containerc">
<div class="navbarc" id="navbarc">
<div class="username">
<!-- base menu -->
<ul>
<li onmouseover="showsubmenu()" onmouseout="hidesubmenu()"> <div id="menuname"> Menu </div>
<!-- actual menu -->
<ul>
<li> sub1 hover here
<!-- sub menu -->
<ul>
<li> submenu 2
</li>
<!-- for more submenu within sub menu add ul tags and li tags within that here -->
</ul>
</li>
<li>Logout
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
.containerc>.navbarc { //setting the dimensions and font properties
padding-left:15px;
padding-right:15px;
padding-top:0px;
margin-left:auto;
margin-right:auto;
font-size:18px;
font-style:bold;
z-index:10;
}
.navbarc {
width:100%; //to occupy the full width of screen
height:45px;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #494846), color-stop(1, #0a0909));
border:1px solid #e7e7e7;
position:fixed; // this will take menu bar along the vertical scroll
color: white;
}
#navbarc ul {
margin: 0;
padding: 0;
list-style: none;
}
#navbarc a:link, #navbarc a:visited { //changing the style properties of anchor tags
color: white;
text-decoration: none; //removes the underline
}
#navbarc a {
display: block;
padding: 6px 8px;
}
#navbarc li {
float: left;
margin-right: 1px;
position: relative;
}
#navbarc li li { //for properties of submenu
width: 160px;
margin-top: 1px;
background-color: #494846;
}
#navbarc li:hover { //on hover change the background color
background-color: #6E6E6E;
}
#navbarc li li:hover {
background-color: #6E6E6E;
}
#navbarc ul ul { //for properties of submenu
position: absolute;
visibility: hidden;
font-size:15px;
}
#navbarc ul ul ul { //for properties of submenu within submenus
position: absolute;
left: 100%;
top: -2px;
border: solid 1px transparent;
}
#navbarc li:hover > ul { // on hover show the submenu
visibility: visible;
}
.menuname { //styling for base menu
display:inline-block;
padding-top:10px;
position:relative;
}
Javascript
$(document).ready(function(){
$("#navbarc ul ul").hide(); //to hide expanded menu initially
function showsubmenu() {
$("#navbarc ul ul").show(); //to show the list on function call
}
function hidesubmenu() {
$("#navbarc ul ul").hide(); // to hide the list on function call
}
});
I have been trying to add a drop down menu to this code but always seem to get turned around. I just want a basic look to the subnav with a simple rollover effect. Every time i try different code it uses home image in the drop down menu and will not disappear when it is not hovered over. Ideas?
HTML:
<ul class="navbar">
<li class="navbar1">Home
<ul class="subnav">
<li>Menu 1 </li>
<li>Menu 2 </li>
</ul>
</li>
</ul>
CSS:
ul.navbar {
width:1000px;
list-style:none;
height:40px;
}
ul.navbar li {
display:inline;
}
ul.navbar li a {
height:40px;
float:left;
text-indent:-9999px;
}
/* Home 0 */
ul.navbar li.navbar1 a {
width:86px;
background:url(../pelican%20outfitters/navbar2.fw.png)
no-repeat 0 0;
}
ul.navbar li.navbar1 a:hover {
background-position:0 -40px;
}
ul.navbar li.navbar1 a.current {
background-position:0 -80px;
}
HTML
<nav>
<ul class="navbar">
<li class="navbar1">Home
<ul class="subnav">
<li>Menu 1
</li>
<li>Menu 2
</li>
</ul>
</li>
</ul>
</nav>
CSS
nav {
margin: 20px auto;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li
{
width:100px;
}
ul li ul li
{ width:200px;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
Output:
Working Fiddle
You should delete the text-indent:-9999px and add this to your css
Delete row:
ul.navbar li a { text-indent:-9999px }
Css:
.navbar li ul {display:none;}
.navbar li:hover ul {display:block;}
Than you have a basic navbar with hidden subnavs.
From here you can try it with your image.
The demo is your code with the new code..
DEMO
More like you want is, dont delete the css.. but only add those 2 lines and this 1:
.navbar li:hover li a{ text-indent:1px; background:white; }
DEMO 2 (without your img (don't know what it is)).
Latest update after the fiddle comment:
You should specify your html and css.. a just added a class to the first link class="home" and to accomodations class="accomodations"
And changed it in the css..
/* Home */
ul.navbar li.navbar1 a.home {
width:86px;
background:url(http://s12.postimg.org/rszejjscd/navbar2_fw.png)
no-repeat 0 0;
}
/* Accomodations */
ul.navbar li.navbar2 a.accomodations {
width:220px;
background: url(http://s12.postimg.org/rszejjscd/navbar2_fw.png) no-repeat -86px 0;
}
DEMO 3
Trying to make just the services link orange on hover with a gray background- can't do it without changing all the menu items.
I can't click on the examples link after hovering over services.
.menu
{
margin:0;
padding:0;
}
.menu ul {
padding-top: 40px;
padding-left: 0px;
line-height: 0px;
margin-bottom: 0px;
float: right;
}
ul li {
display: inline;
}
ul li a:visited {
text-decoration: none;
}
ul li a:hover, .menu ul li .current{
color: #f7823b;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
float: left;
font-size: 20px;
display: block;
text-decoration: none;
color: #ffffff;
padding: 20px;
margin-left: 1px;
white-space: nowrap;
}
li:hover ul {
display: block;
}
li:hover li {
float: none;
font-size: 11px;
}
ul ul li:hover a { background: #818285; }
/*li:hover li a:hover { background: #818285; width:100%; }*/
ul ul {
position: absolute;
z-index: 500;
margin:0;
padding-top: 0px;
}
ul ul li a
{
padding: 20px 0px 20px 5px;
width: 100%;
background: #818285;
}
<div class="socialmedia">
<img class="button" src="http://lifeafterclass.com/cyclone/images/header/facebook.png" <="" img="">
<img class="button" src="http://lifeafterclass.com/cyclone/images/header/twitter.png" <="" img="">
<a href="http://www.stumbleupon.com/stumbler/CyclonStrategies">
<img class="button" src="http://lifeafterclass.com/cyclone/images/header/stumbleupon.png" <="" img=""></a>
<a href="http://www.linkedin.com/company/cyclone-strategies-llc">
<img class="button" src="http://lifeafterclass.com/cyclone/images/header/linkedin.png" <="" img=""></a>
</div>
<div class="menu">
<ul id="menu">
<li>Home</li>
<li> About</li>
<li class="special"> Services
<ul>
<li>Digital Advertising</li>
<li>Promotion Management</li>
<li>Social Media</li>
</ul>
</li>
<li>Examples</li>
<li> Blog </li>
<li> Contact Us</li>
</ul>
</div>
<div style="clear:both"></div>
</div>
I've tried everything- any help is appreciated. Thanks!
http://jsfiddle.net/8ARm5/
Since the li containing services has a class special you can use this to target the element upon hover.
.special:hover{
color: orange;
background: grey;
}
Try to add hover on li not a element:
li:hover > a {
color: #f7823b;
}
Doing so the link keeps style definition even if you points links in submenu.
Take a look: http://jsfiddle.net/8ARm5/5/
http://i.stack.imgur.com/OP0kc.jpg
the navigation menu i have created using the CSS and Html code is not working correctly.
The alignment of the navigation menu is not perfect i want in this way : http://i.stack.imgur.com/h4oPK.jpg
I want to convert this to CSS..
Please help
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#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 {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#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;
}
</style>
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
Fixed. I think this is what you want http://dabblet.com/gist/2792978
Simply remove position: relative from #nav li and give it to #nav.