Highfive0980
Nieuwe gebruiker
- Lid geworden
- 21 dec 2014
- Berichten
- 1
Dag allen,
Ik heb de code voor een nieuwe dropdown menu (jQeury) welke ik wil gebruiken voor een nieuwe website. In Google Chrome draait deze code vlekkeloos, echter krijg ik in Internet Explorer van die vervelende 'bullets' voor de subitems in het menu. Dit is uiteraard niet de bedoeling en verpest de lay-out. Volgens mij moet dit ergens met de CSS te fixen zijn, maar ik weet helaas niet hoe.
Hieronder de code:
index.html
jmenu.css
Volgens mij is de jQeury code hier verder niet van belang, dus die heb ik achterwege gelaten.
Ik hoop dat iemand me hier wegwijs in kan maken. Bij voorbaat dank voor de hulp!
Highfive0980
Ik heb de code voor een nieuwe dropdown menu (jQeury) welke ik wil gebruiken voor een nieuwe website. In Google Chrome draait deze code vlekkeloos, echter krijg ik in Internet Explorer van die vervelende 'bullets' voor de subitems in het menu. Dit is uiteraard niet de bedoeling en verpest de lay-out. Volgens mij moet dit ergens met de CSS te fixen zijn, maar ik weet helaas niet hoe.
Hieronder de code:
index.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>menu test page</title>
<meta http-equiv="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/jmenu.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jMenu.jquery.js"></script>
</head>
<body>
<ul id="jMenu">
<li>
<a>Category 1</a>
<ul>
<li>
<a>Category 1.2</a>
<ul>
<li><a>Category 1.3</a></li>
<li><a>Category 1.3</a></li>
<li><a>Category 1.3</a></li>
<li><a>Category 1.3</a></li>
<li>
<a>Category 1.3</a>
<ul>
<li><a>Category 1.4</a></li>
<li><a>Category 1.4</a></li>
<li><a>Category 1.4</a></li>
<li>
<a>Category 1.4</a>
<ul>
<li><a>Category 1.5</a></li>
<li><a>Category 1.5</a></li>
<li>
<a>Category 1.5</a>
<ul>
<li><a>Category 1.6</a></li>
<li><a>Category 1.6</a></li>
<li><a>Category 1.6</a></li>
<li><a>Category 1.6</a></li>
<li><a>Category 1.6</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Category 1.4</a></li>
<li><a>Category 1.4</a></li>
</ul>
</li>
<li><a>Category 1.3</a></li>
</ul>
</li>
<li><a>Category 1.2</a></li>
<li>
<a>Category 1.2</a>
<ul>
<li><a>Category 1.3</a></li>
<li>
<a>Category 1.3</a>
<ul>
<li><a>Category 1.4</a></li>
<li><a>Category 1.4</a></li>
<li><a>Category 1.4</a></li>
<li><a>Category 1.4</a></li>
<li><a>Category 1.4</a></li>
<li><a>Category 1.4</a></li>
<li><a>Category 1.4</a></li>
<li><a>Category 1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Category 1.2</a></li>
</ul>
</li>
<li>
<a>Category 2</a>
<ul>
<li>
<a>Category 2.2</a>
<ul>
<li><a>Category 2.3</a></li>
<li><a>Category 2.3</a></li>
</ul>
</li>
<li>
<a>Category 2.2</a>
<ul>
<li><a>Category 2.3</a></li>
<li><a>Category 2.3</a></li>
<li><a>Category 2.3</a></li>
</ul>
</li>
<li>
<a>Category 2.2</a>
<ul>
<li><a>Category 2.3</a></li>
<li><a>Category 2.3</a></li>
<li><a>Category 2.3</a></li>
<li><a>Category 2.3</a></li>
<li><a>Category 2.3</a></li>
<li><a>Category 2.3</a></li>
</ul>
</li>
<li><a>Category 2.2</a></li>
</ul>
</li>
<li>
<a>Category 3</a>
<ul>
<li>
<a>Category 3.2</a>
<ul>
<li><a>Category 3.3</a></li>
<li><a>Category 3.3</a></li>
<li><a>Category 3.3</a></li>
<li><a>Category 3.3</a></li>
<li><a>Category 3.3</a></li>
<li><a>Category 3.3</a></li>
<li><a>Category 3.3</a></li>
</ul>
</li>
<li>
<a>Category 3.2</a>
<ul>
<li><a>Category 3.3</a></li>
<li><a>Category 3.3</a></li>
</ul>
</li>
<li><a>Category 3.2</a></li>
<li><a>Category 3.2</a></li>
</ul>
</li>
<li>
<a>Category 4</a>
<ul>
<li><a>Category 4.2</a></li>
<li><a>Category 4.2</a></li>
<li>
<a>Category 4.2</a>
<ul>
<li><a>Category 4.3</a></li>
<li><a>Category 4.3</a></li>
<li><a>Category 4.3</a></li>
<li><a>Category 4.3</a></li>
</ul>
</li>
<li><a>Category 4.2</a></li>
</ul>
</li>
<li>
<a>Category 5</a>
<ul>
<li>
<a>Category 5.2</a>
<ul>
<li><a>Category 5.3</a></li>
<li><a>Category 5.3</a></li>
<li><a>Category 5.3</a></li>
<li><a>Category 5.3</a></li>
</ul>
</li>
<li><a>Category 5.2</a></li>
<li><a>Category 5.2</a></li>
<li><a>Category 5.2</a></li>
</ul>
</li>
<li><a>Category 6</a></li>
<li>
<a>Category 7</a>
<ul>
<li><a>Category 7.2</a></li>
<li><a>Category 7.2</a></li>
<li><a>Category 7.2</a></li>
<li><a>Category 7.2</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$("#jMenu").jMenu({
openClick : false,
ulWidth :'auto',
TimeBeforeOpening : 100,
TimeBeforeClosing : 11,
animatedText : false,
paddingLeft: 1,
effects : {
effectSpeedOpen : 150,
effectSpeedClose : 150,
effectTypeOpen : 'slide',
effectTypeClose : 'slide',
effectOpen : 'swing',
effectClose : 'swing'
}
});
});
</script>
</body>
</html>jmenu.css
Code:
.jMenu{display:table;margin:0;padding:0;list-style:none;}
.jMenu li{display:table-cell;background-color:#322f32;margin:0;list-style:none}
.jMenu li a{padding:10px 15px;display:block;background-color:transparent;color:#fff;text-transform:uppercase;cursor:pointer;font-size:12px}
.jMenu li a:hover{background-color:#3a3a3a}
.jMenu li:hover>a{background-color:#3a3a3a}
.jMenu li ul{display:none;position:absolute;z-index:9999;padding:0;margin:0;list-style:none}
.jMenu li ul li{background-color:#322f32;display:block;border-bottom:1px solid #484548;padding:0;list-style:none;position:relative}
.jMenu li ul li a{font-size:11px;text-transform:none;display:block;padding:7px;border-top:1px solid transparent;border-bottom:1px solid transparent}
.jMenu li ul li a.isParent{background-color:#3a3a3a}
.jMenu li ul li a:hover{background-color:#514c52;border-top:1px solid #322f32;border-bottom:1px solid #322f32}Volgens mij is de jQeury code hier verder niet van belang, dus die heb ik achterwege gelaten.
Ik hoop dat iemand me hier wegwijs in kan maken. Bij voorbaat dank voor de hulp!
Highfive0980
