I've download the Refresh template by Styleshout.com since I really like it. But unfortunately, there was no drop down menu in it, only a normal menu.
So I tried to integrate a drop down menu which I found a nice tutorial for.
It does almost work - almost. Here's the result: the template on my webspace.
The menus are opened - but at the wrong location. Why? What's wrong with my implementation? All 3 drop down lists are opened under the first item.
I hope you can help me. Thanks in advance!
PS: Here's the code:
####################
####### HTML #######
####################
<ul id="nav">
<li>Nav #1
<ul>
<li>Nav #1.1</li>
<li>Nav #1.2</li>
</ul>
</li>
<li>Nav #2
<ul>
<li>Nav #2.1</li>
<li>Nav #2.2</li>
</ul>
</li>
<li>Nav #3
<ul>
<li>Nav #3.1</li>
<li>Nav #3.2</li>
</ul>
</li>
</ul>
####################
#### JAVASCRIPT ####
####################
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
###################
####### CSS #######
###################
ul#nav li ul {
position: absolute;
left: -9999px;
top: 38px;
display: block;
width: 100px;
background-color: transparent;
}
ul#nav li {
position: relative;
}
ul#nav li ul li {
float: none;
}
/* Links in the drop down lists start */
ul#nav li ul li a {
clear: left;
display: block;
text-decoration: none;
width: 100px;
background-color: #333;
}
/* Links in the drop down lists end */
/* Making visible start */
ul#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* Making visible end */
You need to float the container LI's left and set the 'top' value on the pop-up boxes to 100%.
(Tested only in FF3.5)
ul#nav li {
position: relative;
float: left;
}
ul#nav li ul {
position: absolute;
left: -9999px;
top: 100%;
display: block;
width: 100px;
background-color: transparent;
}
I think the reason it's only working in Firefox, or I should say was only working in Firefox since this was posted so long ago, is that IE might need specific pixel locations for the top attribute instead of 100%. I would recommend trying 0px at least for IE, this worked for me recently at least.
Doesn't really explain it directly, but I would reccomend adding and subtracting a class attribute, not modifying (getAttribute, removeAttribute, etc.). Also, your class name has a space in it ( " sfhover" ) which probably isn't a good idea.
Here:
<li>
<a>Nav #1</a>
<ul>
<li>Nav #1.1</li>
<ul>
</li>
To move the entire menu and its submenu. You will have to set float:left at <li> not <a>
#menu ul li a {
float: none;
}
#menu ul li {
float: left;
}
One more thing, this doesn't relate to your problem. But, I think you should use display:none/block instead of left:-9999px/auto.
Hope it help.
Related
We have the following html structure for our menu (see codepin). We would like to modify the menu without having to use JS on page load to move any elements around.
Here is what I tried, but cannot get the custom-dropdown to show like the screenshot below.
Here is my codepin that I have so far, but we are having hard time getting it to align in two columns like the screenshot. The goals below have been simplified, but should be applicable to other links like Category and Company as well since they follow similar structure.
Goal (see screenshot):
On hover of Testing 1, Collaboratively testing 1 and transition accurate should display
On hover of Collaboratively testing 1 then the Enthusiastically communicate cross-platform and Uniquely reconceptualize accurate should display
Screenshot:
Underline below Testing 1 is to simulate on hover effect
Grey background behind Collaboratively Testing is to indicate on hover effect, which results in goal #2 where they are display to the right.
Multi-Level Drop Down Menu with Pure CSS
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-bottom: 3px solid #1bc2a2
}
ul li a:hover {border-bottom: 3px solid #2c3e50}
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
li:hover li { float: none; }
li:hover a { background: #1bc2a2; }
li:hover li a:hover { background: #2c3e50; }
.main-navigation li ul li { border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
here comes your html code
<h1>Multi-Level Drop Down Menu with Pure CSS</h1>
<ul class="main-navigation">
<li>Home</li>
<li>Front End Design
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Resets</li>
<li>Grids</li>
<li>Frameworks</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
</ul>
Please can someone tell me how to put a input text box in a dropdown just as this :-
this pic was using bootstrap. I dont want bootstrap just want to use html/css and javascript maybe? pleas ehelp me i stuck on this quite long.
Code: http://codepen.io/anon/pen/OyQYmN
HTML tags can be nested in eachother. Given this, you can change the dropdown's HTML:
<ul class="dropdown-menu">
<li>An option</li>
<li>Another option</li>
<li>Something else here</li>
</ul>
to include the <input type="text">.
To do this without bootstrap you will have to make your own CSS that will treat a list as a drop-down.
-one way to do this is explained here http://www.instructables.com/id/How-to-Create-Custom-CSS3-Dropdown-Menus-CSS-Drop/?ALLSTEPS
now that you have a list that is treated like a drop down, you can add any element you want in it.
I created a demo that uses pure CSS3 as a dropdown menu and added an input for you. Here is the code to accomplish this, demo is at the bottom.
/* Set Dropdown Display to None*/
nav ul ul {
display: none;
}
/* Display Dropdown on hover*/
nav ul li:hover > ul {
display: block;
}
ul li{
display: inline-block;
}
ul li a {
padding: 20px;
}
ul li a:hover{
text-decoration: none;
}
nav ul ul {
background: #222222;
border-radius: 0px;
position: absolute;
}
nav ul ul li{
padding: 15px 0;
}
nav ul ul li a{
color: #fff;
opacity: .5;
}
nav ul ul li a:hover{
color: #fff;
opacity: 1;
}
CSS3 Dropdown Menu: DEMO
I am very new to javascript, so I apologize in advance if I waste anyone's time with a problem that may have a "duh" answer :-)
I am creating a navigation bar for a webpage. It starts off as an unordered list, and I am styling it to float the list items horizontally across the page. That part works fine for me.
I started to work at incorporating an unordered list as a submenu of one of my original list items. When I hover the mouse over the main list item, the submenu items appear, and when I mouse out, the submenu items disappear. The problem is that when the submenu items appear, they display on top of the navigation link to the left, instead of breaking out and dropping down below the link that I am hovering over. I tried setting the position to relative, but then it just shoved the submenu to the right.
I think the problem may be with my css. If I do not apply the external style sheet, then things seem to work better.
Here is my html:
<ul class="nav">
<li>Home</li>
<li>Department Members</li>
<ul id="menu" style="display:none;position:absolute">
<li>Brian Kendricks</li>
<li>Tim Jones</li>
<li>David Kline</li>
</ul>
<li>Systems Used</li>
<li>System Status</li>
<li>Projects</li>
</ul>
My css is:
.nav li {
float: left;
width: 20%;
font-family: verdana,arial,sans-serif;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
background-image:none;
background-color: #004E98;
display: block;
}
.nav a {
color: white;
}
.nav a:hover {
color: white;
}
.nav li:a:hover {
background-color: #093F6D;
}
And here is my javascript:
function drop(menu) {
document.getElementById(menu).style.display = 'block';
document.getElementById(menu).style.position = 'relative';
}
function hide(menu) {
document.getElementById(menu).style.display = 'none';
}
I would like to stick to using javascript, as the course that I am taking does not wish for me to incorporate things like JQuery at this time.
Thanks in advance for any assistance that you may offer in pointing me in the right direction.
Make your submenu a child of the <li> they are under - instead of currently you have it a child of the overall <ul>. Then you can give the parent item relative positioning, and the child list absolute positioning with top 100% (putting it under the parent item).
function drop(menu) {
document.getElementById(menu).style.display = 'block';
}
function hide(menu) {
document.getElementById(menu).style.display = 'none';
}
.nav li {
float: left;
width: 20%;
font-family: verdana,arial,sans-serif;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
background-image:none;
background-color: #004E98;
display: block;
position: relative;
}
.nav a {
color: white;
}
.nav a:hover {
color: white;
}
.nav li:a:hover {
background-color: #093F6D;
}
.dropmenu {
position: absolute;
top:100%;
left: 0;
}
.dropmenu li {
display: block;
float: left;
width:100%;
}
<ul class="nav">
<li>Home</li>
<li>Department Members
<ul id="menu" class="dropmenu" style="display:none">
<li>Brian Kendricks</li>
<li>Tim Jones</li>
<li>David Kline</li>
</ul>
</li>
<li>Systems Used</li>
<li>System Status</li>
<li>Projects</li>
</ul>
I got a question (capt obvious..)
I have this html:
<div id="row-01-separator">
<ul>
<li>d</li>
<!-- -->
<li><img src="img/scroll_one.png"></li>
<!-- -->
<li>d</li>
</ul>
</div>
the Middle li with the image can noz get a background-color. Just the first and last element should have a background-color.
I got this CSS code
#row-01-separator ul {
height: 32px;
}
#row-01-separator ul li {
display: inline-block;
vertical-align: top;
height: 100%;
min-height:100%;
}
#row-01-separator ul li:first-child, #row-01-separator ul li:last-child {
background-color: white;
width: calc(50% - 38px);
height: 100%;
min-height:100%;
}
And it work. But the Problem is width: calc(50% - 38px); This doesnt work in ie8.
Do you have another idea how can I do this. I know there is a solution with javascript and oneresize.
But maybe you have solution with pure css/html and no js and no calc().
I set up something on CodePen. I think you can understand it better than: http://codepen.io/anon/pen/yBxdq
EDIT:
I decided to do the javascript/jquery alternative. I set up something on codepen, maybe someone can use is it later: http://codepen.io/anon/pen/tfqdL
I have a webpage that uses jquery to display a submenu div while a user is hovering over an a:link in the main parent menu.
$('.menu ul li').hover(function() {
$(this).find('.dropnav').stop(true, true).fadeTo('fast', 1);
}, function() {
$(this).find('.dropnav').stop(true, true).fadeOut(800, 0);
});
The problem is, I want this webpage's navigation feature to be independent of javascript. So when users do not have javascript enabled, the menu will still display - just without the effects of scrolls or fades.
Thanks.
Use the :hover CSS pseudo-class.
.menu ul li:hover .dropnav {
opacity: 1;
/* display: block; ? */
}
Here is a pretty solid example of a CSS based menu. There is JavaScript that goes with it, if you are looking for backwards compatibility to IE6.
http://qrayg.com/learn/code/cssmenus/
HTML
<ul class="main-nav">
<li>main nav-1
</li>
<li>main nav-2
<ul class="sub-nav">
<li>sub-nav-2.1</li>
<li>sub-nav-2.2</li>
<li>sub-nav-2.3</li>
</ul>
</div>
</li>
<li>main nav-3
<li>main nav-4
</ul>
css
ul.main-nav > li { position: relative; display: block; float: left; margin: 0 15px;}
ul.main-nav > li > a {display: block; line-height: 40px; }
ul.sub-nav { display:none; position: absolute; top: 40px; left: 0; min-width: 200px;}
ul.main-nav > li:hover ul.sub-nav { display: block; z-index: 999; }
check this one for live demo http://jsfiddle.net/q9YZf/