How do I make drop down menu from document.getElementById javascript - javascript

I need to make a drop down menu from "menu4" on the code below. The code is running well but I need to introduce a drop down menu. I have tried different ways to have a list inside a list but seems not to work. I really need someones help. Anyone? Thanks.
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
" <li><a href= '#'>Home</a></li> " +
" <li><a href= '#'>menu1</a></li> " +
" <li><a href= '#'>menu2</a></li> " +
" <li><a href = '#'>menu3</a></li> " +
" <li><a href = '#'>menu4</a></li> " +
" <li><a href = 'index.php'> Log Out</a></li> " +
"</ul>";
body {
font-family: Bookman Old Style;
font-size: 13px;
background-color:#EBF4FA;
color: #696969;
padding-right: 150px;
padding-left: 150px;
}
#top{
background-color: ;
height: 120px;
box-shadow: 10px #888888;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #EBF4F4;
border-radius: 0 0 5px 5px;
border-style: solid;
border-right-width: 1px;
}
h3 {
font-family: Bookman Old Style;
border-bottom: 3px;
color: black;
font-size: 16px;
}
table {
width:100%;
}
table, th , td {
border: 1px solid white;
border-collapse: collapse;
padding: 0px;
}
th {
text-align: left;
}
table tr:nth-child(odd) {
background-color: #ffffff;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
ul#menu {
padding: 0;
margin-bottom: 11px;
}
ul#menu li {
display: inline;
margin-right: 3px;
margin: 100px auto;
line-height:30px;
max-width:860px;
}
ul#menu li a {
background-color: #ffffff;
padding: 10px 20px;
text-decoration: none;
color: #696969;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
color: white;
background-color: black;
}
#footer {
position: right;
color: #ffffff;
}
h1 {
border-bottom: 3px solid orange;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>
<nav id="nav01"></nav>
<body>
<div id="main">
<h1>About Us</h1>
<p>Dibon Company Limited is a project delivery and technical consultancy firm that provides efficient and cost effective methodologies and expertise in managing complex as well as simple projects</p>
<div class="box contactdetails">
<h2>Our Contact Details </h2>
<ul>
<li>Dibon Limited Company</li>
<li class="last">Website: dibon</li>
<li>Email: info#dibon</li>
<li class="last">Facebook: Dibon</li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Are you sure you need javascript for this?
If I understand it correctly, you can do this without javascript. Fully functional dropdown menus can take advantage of hover states for the links. I went ahead and cleaned up some CSS for ya. Check it out. Here's the key CSS:
.navigation-menu li:hover ul {
display: inline-block;
position: absolute;
background-color: #fff;
border: 3px ridge #ccc;
box-shadow:2px 2px 5px 2px #ccc;
padding:5px;
}
http://codepen.io/anon/pen/MebwjB

You don't need any js or something else, do it with css3 (transition) by hover:
.mainMenu {
display: flex;
flex-direction: column;
overflow: hidden;
width: 200px;
height: 30px;
background-color: darkgrey;
color: black;
font-family: Arial;
line-height: 30px;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
.mainMenu:hover {
color: white;
background-color: #2f6992;
cursor: pointer;
height: 150px;
}
ul {
padding-left: 15px;
}
li {
list-style: none;
}
li:hover {
color: yellow;
}
.title {
color: white;
background-color: darkgrey;
width: 100%;
height: 30px;
padding-left: 5px;
}
<div class="mainMenu">
<span class="title">HOVER MENU-POINT...</span>
<ul>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
</ul>
</div>
Cheers

Related

Hovering on animated navbar goes wrong

I have a problem.
I have an animated navigation bar on my html website, so that if you scroll it'll change. But I want that if I'm hovering on the changed navbar, it'll change back to his normal state. But that doesn't work at all. I hope you guys can help me.
Code here:
window.addEventListener("scroll", function(){
var header = document.querySelector(".navbar");
header.classList.toggle("sticky", window.scrollY > 0);
});
let navbar = document.querySelector(".sticky");
navbar.addEventListener("mouseover", function( event ){
navbar.classList.toggle("navbar", navbar.onmouseover);}
, false);
body{
margin: 0 0 0 0;
padding: 0;
}
.head {
display: inline-block;
position: absolute;
margin: 0;
background-image: url('pictures/head.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0;
text-align: center;
height: 500px;
width: 100%;
}
.head h1 {
color: white;
text-align: center;
padding: 100px 100px 25px;
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 50px;
}
.head h2 {
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 30px;
color: white;
}
.navbar .dropbtn {
background-color: white;
color: black;
padding: 16px 16px 14px 16px;
font-size: 20px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: black;
transition: 0.6s;
}
.sticky .dropbtn {
background: none;
color: black;
padding: 16px 16px 14px 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: white;
transition: 0.6s;
}
.navbar {
z-index: 1;
overflow: visible;
background-color: white;
position: fixed;
top: 0;
width: 100%;
float: left;
transition: 0.6s;
.navbar .dropdownlinks {
float: left;
}
}
.dropdown {
position: relative;
display: inline-block;
margin: -2px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 16px 0px black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: red;
color: white;
}
.navbar img {
width: 50px;
height: 50px;
border-right: 1px solid grey;
padding-right: 4px;
top: 0;
float: left;
}
.dropdown-content a:hover {
color: white;
background-color: red;
}
.sticky {
background: none;
transition: 0.6s;
}
<header>
<div class="navbar">
<img src="pictures/gear_icon.png" alt="icon">
<div class="dropdownlinks">
<div class="dropdown">
<button class="dropbtn">F1 history</button>
<div class="dropdown-content">
All the teams
All world champions
</div>
</div>
<div class="dropdown">
<button class="dropbtn">News and times</button>
<div class="dropdown-content">
Driver and team news
Liveblog
Calender
Archives
</div>
</div>
<div class="dropdown">
<button class="dropbtn">This season</button>
<div class="dropdown-content">
Driver's standings
Constructor's standings
All current drivers
All current teams
</div>
</div>
</div>
</div>
</header>
It's a formula 1 website btw, so if you love formula 1 please help me:)

jQuery menu not toggeling class name

The Menu is not toggling. When I click the toggle button, I see the following error in my JavaScript:
"message": "Uncaught TypeError: Cannot read property 'toggle' of undefined",
"filename": "https://stacksnippets.net/js",
"lineno": 159,
"colno": 44
}
//java.js
function toggleMenu() {
document.getElementById('Menu').classlist.toggle('active');
}
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
#Menu {
padding: 0px;
position: fixed;
width: 400px;
height: 100%;
background: #00ff00;
left: -400px;
}
#Menu.active {
display: 0px;
}
#menu ul li {
color: rgba(230, 230, 230, 0.9);
list-style: none;
padding: 15px 10px;
top: 40px;
position: relative;
width: 200px;
vertical-align: middle;
cursor: pointer;
background-color: #00ff00;
border-top: 4px solid #ff0000;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#Menu .toggle-btn {
position: absolute;
left: 410px;
top: 65px;
}
#Menu .toggle-btn span {
display: block;
width: 30px;
height: 5px;
background: #000;
margin: 5px 0px;
}
#menu ul {
list-style: none;
margin: 0px;
padding: 0;
}
#menu ul li:hover {
background-color: #000;
}
#menu>ul>li {
border-right: 4px solid #ff0000;
border-left: 2px solid #000;
}
.bottom {
border-bottom: 4px solid #ff0000;
}
#menu ul ul {
transition: all 0.3s;
opacity: 0;
position: absolute;
border-left: 4px solid #ff0000;
border-bottom: 4px solid #ff0000;
border-right: 4px solid #ff0000;
visibility: hidden;
left: 100%;
top: -2%;
}
#menu ul li:hover>ul {
opacity: 1;
visibility: visible;
}
#Menu ul li a {
text-decoration: none;
}
i {
margin-left: 15px;
}
#menu>ul>li:nth-of-type(3)::after {
content: "+";
position: absolute;
margin-left: 60%;
color: #fff;
font-size: 18px;
}
#menu>ul>li:nth-of-type(2)::after {
content: "+";
position: absolute;
margin-left: 56%;
color: #fff;
font-size: 18px;
}
<!doctype html>
<html>
<head>
<title>vertical menu with css</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="java.js"></script>
</head>
<body>
<div id="Menu">
<div class="toggle-btn" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li><i class="fas fa-home">Hjem</i></li>
<li><i class="fas fa-user-tie">Bjørn</i>
<ul>
<li>børn 1 </i></li>
<li>børn 2 </i> </li>
<li>børn 3 </i></li>
</ul>
<li><i class="fas fa-user">Cille</i>
<ul>
<li>børn 1 </li>
<li>børn 2 </li>
<li>børn 3 </li>
</ul>
<li><i class="fas fa-user-tie">David</i></li>
<li class="bottom"><a href="#"><i class="fas fa-user-tie">Fin</i>/a></li>
</ul>
</div>
</body>
</html>
There where quite a bunch of bugs. Please compare my version with yours and you will find the differences.
Take care of case-sensitivity (e.g. classList and classlist, #Menu and #menu)
Look out for closing HTML tags correctly. There where some mistakes.
Remove unncessary elements like </i>. It might be a left over from copy-pasting.
Nethertheless, I would recommend you to use a syntax-highlighting tool, so called IDE. Free versions are for instance VS Code, Atom etc. And afterwards get familiar with the syntax. Mozilla Developer Network is a quite sophisticated and comprehensive source and knowledge base curated by the community.
function toggleMenu() {
document.getElementById('Menu').classList.toggle('active');
}
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
#Menu {
padding: 0px;
position: fixed;
width: 400px;
height: 100%;
background: #00ff00;
left: -400px;
transition: left 360ms ease-in;
}
#Menu.active {
left: 0;
}
#Menu ul li {
color: rgba(230, 230, 230, 0.9);
list-style: none;
padding: 15px 10px;
top: 40px;
position: relative;
width: 200px;
vertical-align: middle;
cursor: pointer;
background-color: #00ff00;
border-top: 4px solid #ff0000;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#Menu .toggle-btn {
position: absolute;
left: 410px;
top: 65px;
}
#Menu .toggle-btn span {
display: block;
width: 30px;
height: 5px;
background: #000;
margin: 5px 0px;
}
#Menu ul {
list-style: none;
margin: 0px;
padding: 0;
}
#Menu ul li:hover {
background-color: #000;
}
#Menu>ul>li {
border-right: 4px solid #ff0000;
border-left: 2px solid #000;
}
.bottom {
border-bottom: 4px solid #ff0000;
}
#Menu ul ul {
transition: all 0.3s;
opacity: 0;
position: absolute;
border-left: 4px solid #ff0000;
border-bottom: 4px solid #ff0000;
border-right: 4px solid #ff0000;
visibility: hidden;
left: 100%;
top: -2%;
}
#Menu ul li:hover>ul {
opacity: 1;
visibility: visible;
}
#Menu ul li a {
text-decoration: none;
}
i {
margin-left: 15px;
}
#Menu>ul>li:nth-of-type(3)::after {
content: "+";
position: absolute;
margin-left: 60%;
color: #fff;
font-size: 18px;
}
#Menu>ul>li:nth-of-type(2)::after {
content: "+";
position: absolute;
margin-left: 56%;
color: #fff;
font-size: 18px;
}
<!doctype html>
<html>
<head>
<title>vertical menu with css</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="java.js"></script>
</head>
<body>
<div id="Menu">
<div class="toggle-btn" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li><i class="fas fa-home">Hjem</i></li>
<li><i class="fas fa-user-tie">Bjørn</i>
<ul>
<li>børn 1</li>
<li>børn 2</li>
<li>børn 3</li>
</ul>
<li><i class="fas fa-user">Cille</i>
<ul>
<li>børn 1 </li>
<li>børn 2 </li>
<li>børn 3 </li>
</ul>
<li><i class="fas fa-user-tie">David</i></li>
<li class="bottom"><i class="fas fa-user-tie">Fin</i></li>
</ul>
</div>
</body>
</html>
Looks like the problem is that you are not using classList correctly, it needs to be camel-cased like below:
function toggleMenu() {
document.getElementById('Menu').classList.toggle('active');
}
More of a semantic thing here too, but why is your file called java.js? Try to name files based on the functions that they perform, or the features that they encapsulate. It'll save you some headaches later on!

HTML/CSS: Add Icon to Text Button

I'm relying on increasing the top and bottom paddings of the center element to create a hover effect, seen below.
Keeping this effect, is there a way to do the following:
To make room for their respective icons, lower the text (help and logout) a little bit (I know I can do position: relative, and then top: 7px, for example, but that messes up the hover animation effect because the center of the 'white' expansion should be the center of the green header)
Now that the text is lowered, I want to add a transparent background sprite to each of the two 'buttons' - a question mark symbol for "help", and another symbol for "logout". So the background would still be green, and on top of the green background, I will see a symbol for each button, and the text below each symbol. If I simply do
.help {background: url() no-repeat -2px 0;}, for example, the image moves along with the hover effect because the height of the element is increased.
The sprites I'm going to using for the background/icons are in the form of:
{url(../theme/images/top_sprites.png) no-repeat -2px 0;}
So how can I use the sprites as Icons for these 'buttons' while keeping the text, the green background, as well as the animation? Note that the borders are added to make it clearer how the animation/effect works.
.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help</a>
<a class="logout" href="#" onclick="openLogout();">Logout</a>
</div>
</div>
You could animate a pseudoelement on the anchor.
Example:
.header {
min-height: 50px;
background-color: #008b10;
}
.menu {
padding: 0 16px;
font-family: Raleway, arial, sans-serif;
border: 1px solid blue;
}
.menu a {
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
padding: 16px 5px;
display: inline-flex;
align-items: center;
flex-direction: column;
position: relative;
}
.menu a span {
position: relative;
}
.menu a:before {
transition: 0.4s;
content: '';
display: block;
position: absolute;
background: white;
opacity: 0;
transform: scaleY(.5);
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.menu a:hover:before {
transform: scaleY(1);
opacity: 1;
}
.menu a img {
max-width: 15px;
display: block;
position: relative;
padding-bottom: 4px;
}
.menu a:hover {
color: #008b10;
}
<div class=header>
<div class="menu">
<a href="#">
<img src="https://unsplash.it/15">
<span>Help</span>
</a>
<a href="#">
<img src="https://unsplash.it/15">
<span>Logout</span>
</a>
</div>
</div>
.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help <i class="far fa-question-circle"></i>
</a>
<a class="logout" href="#" onclick="openLogout();">Logout <i class="fas fa-sign-out-alt"></i>
</a>
</div>
</div>
---CSS---
a:hover {
cursor: pointer;
}
.a-border {
display: inline-block;
position: relative;
color: white;
padding: 0.5rem 0.25rem;
margin: 0 1.5rem;
overflow: hidden;
}
.a-border::after {
content: url("../img/more-btn-bottom.png");
display: block;
position: absolute;
bottom: 0;
left: -0.25rem;
border: none;
transform: scale(0, 1);
transform-origin: 0% 100%;
transition: transform 0.4s;
}
a:hover .a-border::after {
transform:scale(1, 1);
}
a.focused .a-border::after {
transform: none;
}
---JS---
function menuclick(underline) {
var focused = document.getElementsByClassName("focused");
var i;
for (i = 0; i < focused.length; i++) {
var under = focused[i];
if (under.classList.contains('focused')) {
under.classList.remove('focused');
}
}
if (!underline.parentElement.classList.contains('focused')) {
underline.parentElement.classList.add('focused');
}
}
---HTML---
<span class="a-border" onclick="menuclick(this)">ABOUT US</span>
<span class="a-border" onclick="menuclick(this)">CREATERS</span>
<span class="a-border" onclick="menuclick(this)">NEWS</span>
<span class="a-border" onclick="menuclick(this)">CONTACT</span>

Change style of li element on click

I have created a local navigation menu for my web site. It contains 2 li elements as shown on the picture Once you click on the item a black border should be displayed around the href and the name Item should be changed to white with black background.
$(document).ready(function() {
$("li").addClass("liNavA");
$("a").addClass("active");
});
div.figure {
background-color: black;
border-radius: 50%;
width: auto;
}
li.liNav {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 12px black;
border-radius: 24px;
background-color: black
}
li.liNavA {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 12px white;
border-radius: 24px;
color: white;
background-color: white;
}
a.active {
color: white;
text-decoration: none;
}
a.pasive {
color: black;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
<ul class="localNav">
<li class="liNav" id="exploreTitle"><a class="active" id="titleLi" id="exploreTitle">Explore</a></li>
<li class="liNavA"><a class="pasive" href="#">Who already joined</a></li>
<li class="liNav" ><a class="active" href="#">Why develop for us </a></li>
</ul>
</div>
<style type="text/css">
div.figure {
background-color: black;
border-radius: 50%;
width: auto;
}
li.liNav {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 2px black;
padding: 5px;
border-radius: 24px;
background-color: #FFFFFF
}
li.liNavA {
list-style-type: none;
display: inline-block;
margin-top: 18px;
margin-left: 4px;
text-align: left;
border: solid 2px white;
padding: 5px;
border-radius: 24px;
color: white;
background-color: #000000;
}
li.liNavA a {
color: white;
}
a.active {
text-decoration: none;
}
a.pasive {
text-decoration: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="localnavDiv">
<ul class="localNav">
<li class="liNav" id="exploreTitle"><a class="active" href="#">Explore</a></li>
<li class="liNav" id="liRight"><a class="pasive" href="#">Who already joined</a></li>
<li class="liNav" id="liLeft"><a class="active" href="#">Why develop for Hue</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
/**
* add event listner for every list-item
*/
$("#exploreTitle").click(function(){
$("#exploreTitle").attr('class', 'liNavA');
$("#liRight").attr('class', 'liNav');
$("#liLeft").attr('class', 'liNav');
})
$("#liRight").click(function(){
$("#liRight").attr('class', 'liNavA');
$("#exploreTitle").attr('class', 'liNav');
$("#liLeft").attr('class', 'liNav');
})
$("#liLeft").click(function(){
$("#liLeft").attr('class', 'liNavA');
$("#liRight").attr('class', 'liNav');
$("#exploreTitle").attr('class', 'liNav');
})
});
</script>

Create a custom drop down select like the one used on twitter when user logs out

I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed :
This is what I achieved but is not working on IE9 :|
http://fiddle.jshell.net/Hz2JH/
<ul id="main">
<li class="username" tabindex="1" >
<a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">Log Off</li>
</ul>
</li>
</ul>
ul#main {
color: 232323;
width: 120px;
border:2px solid #ccc;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:#f1f1f1;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
​
So how can I build a custom select like the one used on twitter?
This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.
#addMenu, #addMenu ul {
list-style: none;
}
#addMenu {
float: left;
}
#addMenu > li {
float: left;
}
#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}
#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}
#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000;
}
#addMenu ul li:hover a {
background: #ddd;
}
HTML
<ul id='addMenu'>
<li>
<a href='#'>MENU</a>
<ul class='noJS'>
<li><a href='URL'>Option1</a></li>
<li><a href='URL'>Option2</a></li>
<li><a href='URL'>Option3</a></li>
<li><a href='URL'>Option4</a></li>
</ul>
</li>
</ul>

Categories