[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3658
  • Last Modified:

Menu with twitter bootstrap

Hello
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>¿

Open in new window


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!
0
APRESTOUS
Asked:
APRESTOUS
  • 7
  • 6
1 Solution
 
Kyle HamiltonData ScientistCommented:
I didin't look why the twitter code didn't work. However, you are welcome to use my version which works. I added the look and feel from your example.

http://candpgeneration.com/EE/dd-menus-1.html

this css is about 100 lines of code, as opposed to thousands from twitter.
0
 
APRESTOUSAuthor Commented:
Thank You.
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.
0
 
Kyle HamiltonData ScientistCommented:
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.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
APRESTOUSAuthor Commented:
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
0
 
APRESTOUSAuthor Commented:
@kozaiwaniec

I reopened this question

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27850291.html

So you can get extra points if you want to continue...
0
 
Kyle HamiltonData ScientistCommented:
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.
0
 
APRESTOUSAuthor Commented:
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...
0
 
Kyle HamiltonData ScientistCommented:
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)
0
 
APRESTOUSAuthor Commented:
0
 
Kyle HamiltonData ScientistCommented:
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..
0
 
Kyle HamiltonData ScientistCommented:
...just made a small update.
0
 
APRESTOUSAuthor Commented:
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!
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now