Convert Twitter bootstrap bookmarks to selection menu

Question

Does anyone know how to convert Twitter Bootstrap bookmarks to a selection menu? This would be useful for a mobile layout.

Something like that...

<select> <option value="#everything">Everything</option> <option value="#catalog">Catalog</option> <option value="#articles">Articles+</option> <option value="#ejournals">E-Journals</option> <option value="#reserve">Reserve</option> <option value="#databases">Databases</option> </select> 

Here is a living example. I have tab settings and work. But I want him to also work with the selected menu. Thus, the selection menu will also change the tabs. This will be used on the mobile version of the site.

http://library.buffalo.edu/redesign/html/tabs.html

Answer 1

I have a solution for this because I was looking at something like this. A fragment of Terry helps me a lot in this. I used jQuery:

 $(document).ready(function() { $(window).resize(responsive); $(window).trigger('resize'); }); function responsive(){ // get resolution var resolution = document.documentElement.clientWidth; // because mobile layout if (resolution < 979) { if( $('.select-menu').length === 0 ) { // create select menu var select = $('<select></select>'); // add classes to select menu select.addClass('select-menu input-block-level'); // each link to option tag $('.nav-tabs li a').each(function(){ // create element option var option = $('<option></option>'); // add href value to jump option.val(this.href); // add text option.text($(this).text()); // append to select menu select.append(option); }); // add change event to select select.change(function(){ window.location.href = this.value; }); // add select element to dom, hide the .nav-tabs $('.nav-tabs').before(select).hide(); } } // max width 979px if (resolution > 979) { $('.select-menu').remove(); $('.nav-tabs').show(); } } 

View demo

Hope this helps!

Answer 2

You do not need to do anything special. If you included these four files in your page:

• bootstrap.css
• bootstrap-responsive.css <- This is the most important thing for what you need. This .css file will indicate which layout follows depending on the page width.
• jquery-lastest-pack.js <- google search: "lastest pack jquery"
• bootstrap.js

Files called bootstraps will be included in the downloaded download package.

The navigator should be something like this:

 <div class="navbar"> <div class="navbar-inner"> <div class="container"> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <!-- Be sure to leave the brand out there if you want it shown --> <a class="brand" href="#">Project name</a> <!-- Everything you want hidden at 940px or less, place within here --> <div class="nav-collapse"> <!-- .nav, .navbar-search, .navbar-form, etc --> </div> </div> </div> </div> 

And what you included in nav-collapse will be included in a nice menu for mobile devices. You can read more in the download documentation here in the section "Unusual Responses"

If you want to see an example of how the final result will be, go to the bootstrap main page and reduce the width of your browser.

Answer 3

If you use Javascript, you can simply create a function to convert it when you determine that the user is on a mobile device.

 var $select = $('<select></select>'); $('.nav-tabs li a').each(function() { $select.append('<option>' + $(this).text() + '</option>'); }); 

http://jsfiddle.net/mBddM/