I have an issue with superfish which makes the dropdown menu not appear at all in ONLY IE8. It shows up in everything else (even IE6) but not IE8. I didn't modify the source JS at all and I'm calling a div called "subnav" where my list is displayed.
What SHOULD happen is when I mouse-over the menu-item, it changes the dropdown menu's CSS to "visibility: visible, display:block" and displays the menu. In IE8, nothing happens and no CSS is changed at all.
Any ideas what could be causing it? I'm also using the supersubs plugin for superfish.
Here is the css:
#navbar ul{
margin:10;
padding:0;
width:1000px;
}
#navbar li{
float:left;
color:#191919;
list-style-type:none;
text-transform:uppercase;
background:transparent url('../images/common/layout/nav-separator.jpg') center right no-repeat;
padding:10px 0;
}
#navbar li.last{
background:none;
}
#navbar ul li a{
padding: 12px 33px;
color: #fff;
text-decoration: none;
}
#navbar ul li a:hover{
color:#05af0d;
background:transparent url(../images/common/layout/nav-hover-highlight.png) top center no-repeat;
}
#navbar ul li a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow.png);
}
#navbar ul li:hover a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow-roll.png);
}
#navbar ul li a.hover-arrow:hover{
background:#000 url('../images/common/layout/nav-separator.jpg') right 9px no-repeat;
}
#navbar ul li p{
margin:0;
display:inline-block;
}
/*Sub Nav Lists */
.subnav {
display:none;
visibility:hidden;
}
#navbar ul li ul{
margin:0; padding:0;
position: absolute;
left: auto; top: 40px;
background: #333;
z-index: 99;
}
#navbar ul li ul li{
background:none;
}
#navbar ul li ul li a{
padding:0px 3px;
display:inline-block;
margin:0;
width:150px;
text-transform:capitalize;
}
#navbar ul li ul li a:hover{
background-color:#a7a7a7;
color:#000;
border:none;
background-image:none;
font-weight:bold;
}
Here is how it's going on the page:
<div id="navbar">
<ul class="topnav">
<li id="item 1"><p></p>
<ul class="subnav"></subnav>
</li>
<li id="item 2"><p></p>
<ul class="subnav"></subnav>
</li>
etc...
</ul>
</div>
Not sure if this will address the problem you're seeing, but I noticed in your html snippet that the UL elements with the subnav class aren't being closed with an appropriate tag. First thing I'd try is replacing them with:
<ul class="subnav"></ul>
Any other errors may not be being handled by IE8 as graciously as other browsers. Try running your page through a validator (ie: The W3C Markup Validator)
Related
I have a menu that slides right on a website. I cannot find any css code that causes this to happen, so I am thinking it is in the javascript code instead. I am not very familiar with Javascript code and am unsure where to fix it. I need some advice. We want the menu to move downward instead, like in the top main menu. The website in question is: http://www.wvexecutive.com/
In the HTML and CSS code that I looked through, I noticed that the class .sf-js-enabled if disabled, disables the submenu and it doesn't work. This is the only thing that I have found that affects this animation.
I cannot find the style sheet for this code:
class="secondnav-menu sf-js-enabled sf-menu".
But here is the HTML:
<div id="categories_container">
<div id="categories">
<ul id="menu-main-menu"class="secondnav-menu sf-js-enabled sf-menu"><li id="menu-item-1004" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home current-menu-ancestor current-menu-parent menu-item-has-children menu-item-1004">Home
<ul class="sub-menu" style="display: none; visibility: hidden;">
<li id="menu-item-25711" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-89 current_page_item menu-item-25711">Resources</li>
</ul>
</div><!-- #categories -->
</div>
And here is the css for this.
ul, menu, dir {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
/* Categories */
#categories_shadow{
float:left;
background:url(images/categories_menu_shadow.png) no-repeat bottom left;
height:61px;
}
#categories_container{
float:left;
width:100%;
}
#categories{
width:960px;
height:48px;
background: url(images/categories-bg.jpg) 0 0 repeat-x #601111;
/*border:1px solid #e1e1e1;*/
position:relative;
margin:0 auto;
}
#categories .home_first_line{
border-left:1px solid #e1e1e1;
}
#categories .home_second_line{
border-left:1px solid #fff;
}
#categories ul{
float:left;
}
#categories ul li{
float:left;
list-style:none;
font-size:14px;
/*line-height:51px;*/
/*border-right:1px solid #560f0f;*/
}
#categories ul li ul li, #categories ul li ul li a {
border-right:none;
}
#categories ul li ul li a{
line-height:35px !important;
}
#categories ul li a{
text-decoration:none;
color:#fff;
display:block;
line-height:48px;
padding:0px 16px;
float:left;
/*border-right:1px solid #701414;*/
font-family: 'Antic Slab',Tahoma,serif;
}
#categories ul li a:hover{
background:#731414;
}
#categories .current-cat a, #categories .current-menu-item a, #categories .current-menu-parent a, #categories .current_page_item a {
background:#731414;
}
#categories ul li ul li a:hover{
background:none;
color:#747474 !important;
}
Again, I want this menu to expand down, not to the side, on the right hand side. I didn't build this website and I am coming in behind another developer on this trying to navigate their code. I don't typically use javascript much myself. I use CSS.
#categories ul li{
position:relative
}
#categories ul.sub-menu {
position: absolute;
top: 48px;
z-index: 1;
}
I have a website: http://www.icontactlens.com.sg
When I click the navigation menu "About Us", it will display the sub-menu at both Chrome and Firefox. However, when I click at the IE (8,9,10 versions), it not working.
Here is the CSS code:
/* main navigation bar */
#navigation{
padding:0 0 30px 0;
}
/* first level menu item's font face */
#navigation > ul > li > a{
font-family: 'Oswald', arial, serif;
}
/* first level links */
#navigation, #navigation a{
color:#fff;
text-decoration:none;
font-size:14px;
line-height:100%;
display:block;
}
/* inacvtive - expandable items */
#navigation a.inactive{
background:url(../images/plusminus.png) right 3px no-repeat;
}
/* acvtive - expanded items */
#navigation a.active{
background:url(../images/plusminus.png) right -12px no-repeat;
}
/* current page items and hover states */
#navigation a:hover, #navigation ul li.current_page_item a, #navigation ul li.current-menu-ancestor a{
color:#9D9D9D;
}
/* current page items and hover states */
#navigation ul li.current_page_item a:hover, #navigation ul li.current-menu-ancestor a:hover{
color:#fff;
}
#navigation ul ul li.current-menu-item a{
color:#D0D0D0;
}
#navigation ul{
padding:1px 0 0 0;
display:block;
margin:0;
list-style:none !important;
}
/* First Level */
#navigation > ul{
background:url(../images/transparent-pixel.png) top repeat-x;
}
#navigation > ul > li{
background:url(../images/transparent-pixel.png) bottom repeat-x;
padding:10px 0 10px 0;
}
#navigation ul li{
display:block;
}
/* Sub Levels */
#navigation ul ul{
display:none;
margin:10px 0 0 0;
}
#navigation ul ul li{
margin:0 0 0 0;
padding:5px 0 5px 0;
}
#navigation ul ul li a{
font-size:12px;
color:#C4C4C4;
}
/* Third Level */
#navigation ul ul ul{
margin:10px 0 0 0;
background:url(../images/transparent-pixel.png) repeat-y;
}
#navigation ul ul ul li{
margin:0 0 0 10px;
}
Does I missing anything on the CSS stylesheet?
I have a mobile site I'm working on. I finally got the JS code to work for showing submenu on click rather than hover. Now I'm having trouble positioning the submenu directly under the main menu. I researched the best i can, found that i need to make the main menu position "relative" and submenu "absolute". I've been going in circles trying to figure apply that, but no luck. The code is a bit messy so pardon me. I'm just a noob.
HTML
<html>
<head>
<link rel="stylesheet" href="phone.css">
</head>
<body>
<img class="smlogo" alt="" src="clearlogo123.png">
<div id="menuclick" class="smenu_div">
<ul>
<li>Menu
</div>
<div id="hiddenMenu" class="smenu_div" style="display: none;">
<ul>
<li>1Submenu</li>
<li>2Submenu</li>
</ul>
</div>
</li>
</ul>
<br>
<script>
var hidden = true;
document.getElementById('menuclick').onclick = function () {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
</script>
</body></html>
CSS
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
float:right;
overflow:hidden;
position: relative;
display: block;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:#000000;
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
z-index: 50;
position:relative;
}
.smenu_div li ul
{
position:absolute;
float:right;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
display:block;
position:relative;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
position:relative;
color:#000000;
background:#fdff30;
}
Try changing your HTML so that you dont have a div ending in the middle of the first li.
Then if you put an ID directly onto the hidden menu, you can use the javascript to directly hide / show the hidden menu
http://jsbin.com/fexazihe/1/edit?html,css,js,output
HTML
<body>
<img class="smlogo" alt="" src="clearlogo123.png">
<div id="menuclick" class="smenu_div">
<ul>
<li>
Menu
<ul id='hiddenMenu'>
<li>1Submenu</li>
<li>2Submenu</li>
</ul>
</li>
</ul>
</div>
</body>
CSS
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
overflow:hidden;
position: relative;
display: block;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0);
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
z-index: 50;
position:relative;
}
/* Changed this so that your hidden menu is hidden by default */
.smenu_div li ul
{
display: none;
position: relative;
width: 100%;
background: transparent;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
background: #000000;
display:block;
position:relative;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
position:relative;
color:#000000;
background:#fdff30;
}
JS
<script>
var hidden = true;
document.getElementById('menuclick').onclick = function () {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
</script>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I want to make a responsive menu looks like following in my website.
I've already made my website responsive with CSS media queries. I want to add this kind of menu when the max-width : 479px .
This is my Project: Link to project
You can try to do something like this.For me it looks like drop down menu. It is just an suggestion
Fiddle LINK
<div class="dd_menu_wrapper">
<!-- MENU -->
<label for="dd-0" class="dd_label">Navigation</label>
<input type="checkbox" class="dd_toggle" id="dd-0">
<ul class="dd_menu">
<li>Home
</li>
<li class="dd_parent">
<label for="dd-1">Products</label>
<input type="checkbox" class="dd_trigger" id="dd-1">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>Link Five
</li>
</ul>
</li>
<li class="dd_parent">
<label for="dd-2">Resources</label>
<input type="checkbox" class="dd_trigger" id="dd-2">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>This is samplek
</li>
</ul>
</li>
<li>Contact
</li>
<li>Resources
</li>
<li>Resources
</li>
</ul>
</div>
CSS
/* _______________________________________________
01 MENU BAR
_______________________________________________ */
.dd_menu_wrapper {
width: 479px;
margin:0 auto;
position: relative;
z-index:9999;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:21px;
color: #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-bottom:1px;
}
.dd_menu_wrapper a, .dd_menu_wrapper label {
color: #FFF;
text-decoration: none;
cursor: pointer;
-webkit-transition:color .3s;
-moz-transition:color .3s;
-o-transition:color .3s;
-ms-transition:color .3s;
transition:color .3s;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.dd_menu_wrapper a:hover,
.dd_menu_wrapper label:hover,
.dd_parent:hover label {
color:#000;
background-color:#eff0f1;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.dd_menu {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
*zoom: 1;
background: #565a5c;
}
.dd_menu:before, .dd_menu:after {
content:" ";
display: table;
}
.dd_menu:after {
clear: both;
}
.dd_menu li {
position: relative;
}
.dd_menu > li {
float: left;
font-weight:bold;
}
.dd_menu li a {
padding: 10px 15px;
display: block;
}
.dd_menu > li:hover {
background-color: #eff0f1;
color:#000;
}
.dd_menu li.dd_parent {
}
.dd_menu li.dd_parent ul li a {
color:#000;
text-decoration:none;
font-size:13px;
}
.dd_menu li.dd_parent ul li a:hover {
color:#000;
text-decoration:underline;
}
.dd_menu li.dd_parent > label {
display: block;
padding: 10px 15px;
background-repeat: no-repeat;
}
.dd_menu li.dd_parent > label a:hover {
color:#000000;
}
.dd_menu li.dd_parent > label a:active {
color:#000000;
}
.dd_menu li.dd_parent > label a:focus {
color:#000000;
}
.dd_menu li.dd_parent > label a:visited {
color:#000000;
}
.dd_menu li.dd_parent > label a {
color:#000000;
}
/* _______________________________________________
02 DROP DOWNS
_______________________________________________ */
.dd_menu ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
top: 41px;
left: -999em;
min-width: 170px;
background: #eff0f1;
color:#000;
}
.dd_menu .dd_trigger {
display: block;
position: absolute;
cursor: pointer;
width: 100%;
margin: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
/* _______________________________________________
03 DESKTOP VERSION
_______________________________________________ */
#media screen and (min-width: 768px) {
.dd_menu > li:hover > ul {
left:auto;
}
.dd_toggle, .dd_label {
display: none;
}
}
/* _______________________________________________
04 MOBILE VERSION
_______________________________________________ */
#media screen and (max-width: 767px) {
.dd_label {
display: block;
padding: 10px 15px;
cursor: pointer;
color:#ffffff;
background: #565a5c;
}
.dd_label:after {
width: 24px;
height: 24px;
content: url("../images/toggle.png");
float: right;
}
.dd_toggle, .dd_toggle:checked {
width: 100%;
display: block;
position: absolute;
cursor: pointer;
height: 40px;
margin: 0;
opacity: 0;
}
.dd_menu {
position: absolute;
background: #565a5c;
opacity:0;
visibility:hidden;
}
.dd_menu > li {
padding-right: 0;
float: none;
}
.dd_menu > li:hover {
background-color: transparent;
}
.dd_menu li ul {
display: block;
width: 100%;
top:auto;
left:auto;
width:auto;
z-index: 999;
visibility: visible;
margin-left: 0;
padding-left:12px;
background: none;
}
.dd_toggle:checked + .dd_menu {
opacity:1;
visibility:visible;
}
.dd_menu .dd_trigger + ul {
max-height:0;
opacity:0;
visibility:hidden;
}
.dd_menu .dd_trigger:checked + ul {
position: static;
max-height:999px;
opacity:1;
visibility:visible;
z-index: 999;
background-color:#eff0f1;
}
}
In smaller screen hide your menu with css .
.menu { display:none; }
make one button whos hide on larger screen and visible in smaller screen with help of media queries , then you can add java script like this
$(document).ready(function (){
$("#buttonId").click(function (){
$("#menu").slideToggle();
});
});
The image you included is probablly using Bootstrap Framework to achieve the responsiveness.
You can have a look at it here.
You will have to write CSS media queries to achieve that. You can refer to this tutorial to find how can you make a responsive navbar.
Demo
css
html,body {
margin:0;
padding:0;
}
header {
background-color:black;
overflow:hidden;
padding:2%;
}
#logo {
float:left;
width:calc(100% - 50px);
max-width:280px;
height:40px;
background-image:url('https://lh4.googleusercontent.com/-gjxoCu8Fu3c/AAAAAAAAAAI/AAAAAAAA-Wk/mVaqfjXjn4k/s46-c-k-no/photo.jpg'); /* your logo here! */
background-repeat:no-repeat;
/*background-size:100%;*/
}
nav {
float:right;
padding-top:10px;
}
.navitem {
color:#999;
font-family:Helvetica;
font-size:16px;
margin-left:5px;
text-decoration:none;
font-weight:bold;
padding:8px;
}
.navitem:first-child {
margin-left:0px;
}
.navitem:hover {
color:white;
}
#smartbutton {
float:right;
width:20px;
height:15px;
cursor:pointer;
padding:7px;
border:1px solid #999;
border-radius:6px;
margin-top:5px;
display:none;
}
.buttonline {
background-color:#999;
height:3px;
margin-top:4px;
}
.buttonline:first-child {
margin-top:0px;
}
/* standard menu */
#media only screen and (min-width:480px)
{
#smartbutton {
display:none;
}
nav {
display:inline-block !important;
}
}
/* smart menu */
#media only screen and (max-width:479px)
{
#smartbutton {
display:inline-block;
}
nav {
display:none;
width:100%;
position:relative;
top:5px;
}
.navitem {
border-top:1px solid #999;
display:block;
margin:0px;
}
.navitem:hover {
background-color:#333;
}
}
HTML
<header>
<a id="logo" href="#"></a>
<nav>
Link1
Link2
Link3
</nav>
</header>
jquery
// create smartbutton
$('nav').before('<div id="smartbutton"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
// add click listener
$('#smartbutton').click(function(event)
{
$('nav').animate({height:'toggle'},200);
});
I thinks its better to use Frameworks like Twitter Bootstrap or Foundation but as I've seen you example above I think it is Twitter Bootstrap. It is simple to use the frameworks.
Here is tutorials of Twitter Bootstrap. I give you the navbar link for you to see the example.
http://getbootstrap.com/components/#navbar
See the examples there.. just make you browser smaller for you to see how it is responsive..
I hope it will help you.
Why don't you use a framework? Here for example .
They have a component which is pretty much what you want.
And here you will find an article on how to style it to your liking.
I have a code where I want to apply a image and also background color at the same time. Can anyone help me with it?
CSS
.menu, .menu ul
{
width:1000px;
background-color: #F3F3F3;
margin: 0;
}
.menu{ padding: 0; height:30px;}
.menu li
{
float: left;
padding-top:3px;
height:20px;
text-align:left;
text-transform:uppercase;
position: relative;
display: block;
font-family: Tahoma;
font-size: 8px;
font-weight:bold;
text-align: center;
text-decoration: none;
padding:10px 15px 0 15px;
background:url(../image/border.png) no-repeat right center;
}
.menu li:hover
{
background:#3EBBEC;
color: #FFFFFF;
}
.menu a { text-decoration: none; color:#000000; }
.menu a:hover { text-transform:lowercase; }
HTML
<ul class="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
This is the code of both HTML and CSS where I need to apply an image and also a bckground color at the same time. Please someone help me with this.
Don't use the short-hand notation when you only want to change single values. Or the other way , if you use the short-hand notation, supply all values you don't want to be "default" values.
Use:
.menu li:hover
{
background-color: #3EBBEC;
}
or:
.menu li:hover
{
background: #3EBBEC url(...) ...;
}
Just remember that when you use the short-hand, that all values not provided will fallback to it's default not to it's inherited values.
.menu li {
background: #color url(path to img);
}
.menu li:hover {
background: #hover-color url(path to hover-img);
/* or if only color is changed just write */
background-color: #hover-color;
}
add
.menu li:hover
{
background:#3EBBEC url(image.jpg) no-repeat;
color: #FFFFFF;
}
First your HTML should look like this
<ul class="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
CSS
ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li a{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}
and if you like to add hover state
ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li:hover{background:url(yourhoverbackgroundimage.png);}
ul.menu li a, ul.menu li a:visited{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}
ul.menu li a:hover{background:url(yoursecondbackgroundimagehover.png);}