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;
}
Related
Currently developing a website that contains a drop down navigation menu with jQuery. However I'm having an issue where the drop down isn't displaying on top of the other elements when I hover over the parent link... I think it's pretty obvious that it's a z-index issue but I have been stumped for a while now so any help would be appreciated.
HTML
<div class="navigation">
<ul>
<li>Link 1</li>
<li>Parent 1
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</ul>
</div>
CSS
.navigation {
position:relative;
background-color:#4F4F4F;
width:100%;
min-width:910px;
box-shadow: 0px 2px 3px rgba(0,0,0, .4);
z-index:10;
overflow-y:hidden;
overflow-x:auto;
height:auto;
}
.navigation ul {
margin:0;
padding:0;
list-type:none;
text-align:center;
position:relative;
}
.navigation ul li {
display:inline-block;
padding-left: 52px;
position:relative;
z-index:11;
}
.navigation ul li a {
display:block;
height:29px;
color:#fff;
text-decoration:none;
font-family: cabinmedium;
font-size:13px;
padding-top:18px;
position:relative;
z-index:11;
}
.navigation ul ul {
position:absolute;
width:auto;
display:none;
box-shadow: 0px 1px 1px #999;
margin-left:-10px;
background-color:#89c63b;
text-align:left;
padding-left:10px;
padding-right:10px;
z-index:11;
}
.navigation ul ul li {
display:block;
background-color:#89c63b;
padding:0;
width:auto;
min-width: 100px;
position:relative;
z-index:11;
}
jQuery
$(document).ready(function() {
$(".navigation ul li").hover(function() {
$(this).find("ul").stop().fadeToggle(400);
})
});
NOTE: I included the jQuery just incase but I have tested and it does infact fade in/out the navigation elements as it needs to.
Any ideas anybody?
'navigation' class will be as like below code without 'overflow-y', 'overflow-x'
.navigation {
position: relative;
background-color: #4F4F4F;
width: 100%;
min-width: 910px;
box-shadow: 0px 2px 3px rgba(0,0,0, .4);
z-index: 10;
/* overflow-y: hidden; */
/* overflow-x: auto; */
height: auto;
}
demo
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>
I am trying to create a mouseover navigational site. I have this as my basic design but I wanted to have the main buttons of "Our Team", Locations, and Patient Reources. This is what I had before trying to change to a mouseover scheme...
<div class="title">Division of Gastroenterology</div>
</center>
<div class="left_side">
<p> Staff</p>
<p><b>Faculty</b></p>
<p><b>Fellows</b></p>
<p>Locations</p>
<p><b>Perelman Center for Advanced Medicine</b></p>
<p><b>Presbyterian Medical Center</b></p>
<p><b>Penn Medicine at Radnor</b></p>
<p>Patient Resources</p>
<p><b> Procedure Preps</b></p>
<p><b>Insurance Provider Numbers</b></p>
<p><b>IBD Diet</b></p>
I tried this but am clearly missing something...
what i have done in the past is hide the dropdown off the screen, then when the user hovers over a link bring the dropdown back into view.
I accomplished this by using unorderd lists like this:
<ul id="nav">
<li>Home
<ul>Link 1</ul>
<ul>Link 2</ul>
<ul>Link 3</ul>
</li>
...
</ul>
And in the CSS set the main <li>'s position to relative, the dropdown to absolute and :hover of the dropdown sets the left position to 0
/* --- MAIN LINK --- */
#nav li{
float:left;
margin-right:35px;
position:relative;
}
/*--- DROPDOWN ---*/
#nav ul{
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav li:hover ul{
left:0; /* Display the dropdown on hover */
I think you are trying to create a navigational bar as inferred from the information you've posted as well as your general question.
To implement this fully would require a bit of editing and explanation - which will be too long to do fully. So, I adapted a nice solution off the web that uses unordered lists, and CSS and have made it available to you as well as the article from where it is linked.
Solution Attempt: http://jsfiddle.net/zFsaF/1/
<nav>
<ul>
<li>Staff
<ul>
<li>Faculty</li>
<li>Fellows<li>
</ul>
</li>
<li>Locations
<ul>
<li>Perelman Center for Advanced Medicine</li>
<li>Presbyterian Medical Center</li>
<li>Penn Medicine at Randor</li>
</ul>
</li>
<li>Patient Resources
<ul>
<li>Procedure Preps</li>
<li>Insurance Provider Numbers</li>
<li>IBD Diet</li>
</ul>
</li>
</ul>
</nav>
CSS:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
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: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Article: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
You can of course adapt this as you need it however you wish.
NOTE: If some things do not make sense, you can always refer back to the original article, use Google, or consult the very good W3Schools reference:
http://www.w3schools.com/css/css_navbar.asp
Good luck!
UPDATE:
The OP forgot to mention that the solution has to be in Javascript.
As such, the best place to begin would be to examine tutorials that have already done what is requested. Here's an excellent place to start:
http://vandelaydesign.com/blog/tools/dropdown-navigation-menus/
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);}
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)