APRESTOUS
asked on
Menu with twitter bootstrap
Hello
I'm trying to make multilevel menu based on twitter bootstrap.
http://jsfiddle.net/W3Zj8/
Here is the HTML:
I can't figure out why the submenu is hidden untill I hover on "More options"
But then I see directky the second level menu.
While I expect (and would like) to see it appearing only when I hover on "Sub with sub" submenu item.
Do you have a suggestion?
Thank you!
I'm trying to make multilevel menu based on twitter bootstrap.
http://jsfiddle.net/W3Zj8/
Here is the HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Twitter Bootstrap Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<body>
<div class="container">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">Sub with sub</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">SubSub1</a></li>
<li><a tabindex="-1" href="#">SubSub2</a></li>
</ul>
</li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>¿I can't figure out why the submenu is hidden untill I hover on "More options"
But then I see directky the second level menu.
While I expect (and would like) to see it appearing only when I hover on "Sub with sub" submenu item.
Do you have a suggestion?
Thank you!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
cheers :)
beware of adding too much bloat to your site - css frameworks, js libraries, lots of plugins - these things abound these days as more people have learned how to write them. You'll almost always be better off writing your own optimized code.
beware of adding too much bloat to your site - css frameworks, js libraries, lots of plugins - these things abound these days as more people have learned how to write them. You'll almost always be better off writing your own optimized code.
ASKER
Unfortunately you solution was not that good as it seemed to be.
The main advantage of frameworks like bootstrap is cross browser compatibility.
While your menu doesn't work properly even in IE8.
I could manage to avoid that it is screenwide by deleting width=100%.
But in older IE (and IE8 is still not that old to ignore it)
1) heigth of menu items is higher
2) arrow dissapear
The main advantage of frameworks like bootstrap is cross browser compatibility.
While your menu doesn't work properly even in IE8.
I could manage to avoid that it is screenwide by deleting width=100%.
But in older IE (and IE8 is still not that old to ignore it)
1) heigth of menu items is higher
2) arrow dissapear
ASKER
ASKER
@kozaiwaniec
I reopened this question
https://www.experts-exchange.com/questions/27850291/Dropdown-menu-with-twitter-bootstrap.html
So you can get extra points if you want to continue...
I reopened this question
https://www.experts-exchange.com/questions/27850291/Dropdown-menu-with-twitter-bootstrap.html
So you can get extra points if you want to continue...
APRESTOUS,
My menu was based off another one I had done that was absolutely cross-browser compatible. I made some changes to it to make it look like what you were getting with the twitter one, and didn't check it in IE - my bad. It's fixed if you want it.
There are other tweaks (like the heights) it could use in IE, but I'm not going to pursue it if you're not going to use it anyway.
I'm not a fan of frameworks, they add bloat, and lots of functionality you probably won't use. I prefer to only develop what I need. But it doesn't matter - to each his own.
My menu was based off another one I had done that was absolutely cross-browser compatible. I made some changes to it to make it look like what you were getting with the twitter one, and didn't check it in IE - my bad. It's fixed if you want it.
There are other tweaks (like the heights) it could use in IE, but I'm not going to pursue it if you're not going to use it anyway.
I'm not a fan of frameworks, they add bloat, and lots of functionality you probably won't use. I prefer to only develop what I need. But it doesn't matter - to each his own.
ASKER
Thank you.
I'd certainly use it as I filled the menu already with data ( quite a large set of) and adapted the css to the look and feel of the site before I explored that IE problem...
I'd certainly use it as I filled the menu already with data ( quite a large set of) and adapted the css to the look and feel of the site before I explored that IE problem...
OK. If you want to, post a link to your page, I can help you fix whatever is not working like you want it.
(if you can't post a link, zip up the files and upload them)
(if you can't post a link, zip up the files and upload them)
ASKER
Please:
http://laatste.info/menu2.php
http://laatste.info/menu2.php
couple of notes:
1. I noticed your file doesn't have any headers - I'm assuming this is getting included in an html document that does contain headers and a doctype.
2. The IE fixes are made using conditional statements by assigning classes to the html element in the head of the document. I can then use those classes in my style sheet to target versions of IE. So it's important that you put those conditionals in the top of your doc.
3. You don't have to use this, but the javascript code at the top of the page adds the "arr" class to items that have submenus. Which means that you don't have to hard-code the "arr" class into your html - it's just a convenience.
4. The arrow is an image for IE less than 9. So make sure you download that too.
http://candpgeneration.com/EE/images/arrow2.png
Here is the full page code:
http://candpgeneration.com/EE/dd-menu-2.html
I looked at it in IE 7, 8, 9, Chrome, FF. If there's anything else that's not looking like you want it just let me know. But I think you can probably take it from here..
1. I noticed your file doesn't have any headers - I'm assuming this is getting included in an html document that does contain headers and a doctype.
2. The IE fixes are made using conditional statements by assigning classes to the html element in the head of the document. I can then use those classes in my style sheet to target versions of IE. So it's important that you put those conditionals in the top of your doc.
3. You don't have to use this, but the javascript code at the top of the page adds the "arr" class to items that have submenus. Which means that you don't have to hard-code the "arr" class into your html - it's just a convenience.
4. The arrow is an image for IE less than 9. So make sure you download that too.
http://candpgeneration.com/EE/images/arrow2.png
Here is the full page code:
http://candpgeneration.com/EE/dd-menu-2.html
I looked at it in IE 7, 8, 9, Chrome, FF. If there's anything else that's not looking like you want it just let me know. But I think you can probably take it from here..
...just made a small update.
ASKER
Thank you!
Yes, it is an include file.
It looks good now! I'm not behind my PC right now, but I expect it will be OK.
Great!
Yes, it is an include file.
It looks good now! I'm not behind my PC right now, but I expect it will be OK.
Great!
ASKER
I was interested why it doesn't work. Because I need it in more places.
But I can't refuse your solution simply because it is a good one.