Skip to content
This repository

Add subnav component and behavior to BS core #1189

Closed
dbpolito opened this Issue January 25, 2012 · 61 comments
Daniel Polito

I loved the way you did the subnav on docs, i would love that becomes an component and javascript plugin.

Maxime Fabre

Thought the same thing when I realized that it wasn't incorporated in Bootstrap.

Mark Otto
Owner
mdo commented January 25, 2012

Our subnav in the docs is a bit of a hack right now and for us to add to the repo would require a bit of reworking to make it the best it can be. We'll revisit after we push out 2.0 for a 2.x release.

Timm Stokke

+1

Anand Anjaria

I could replicate the subnav but dropdown is not working on it :(

Mark Otto
Owner
mdo commented January 30, 2012

No need to keep +1ing, folks—we'll add it when we can :).

Kaspars Sprogis

already using subnav, stolen from docs.css :)
+1

Sean Plaice

+1

Piotrek Majewski

+1

Adam Hill

+1

Tuckie

+1

Jacob
Owner

If you're wondering how it's done - this is the js:

    // fix sub nav on scroll
    var $win = $(window)
      , $nav = $('.subnav')
      , navTop = $('.subnav').length && $('.subnav').offset().top - 40
      , isFixed = 0

    processScroll()

    $win.on('scroll', processScroll)

    function processScroll() {
      var i, scrollTop = $win.scrollTop()
      if (scrollTop >= navTop && !isFixed) {
        isFixed = 1
        $nav.addClass('subnav-fixed')
      } else if (scrollTop <= navTop && isFixed) {
        isFixed = 0
        $nav.removeClass('subnav-fixed')
      }
    }

Maybe we add this to scrollspy? i'm not quite sure yet.

Thomas Winterstetter

@fat What's the trick to get the javascript to work? How exactly does it need to get inserted to make the scroll-wonder happen? Thanks!

Gavin Wye

I just spent an hour figuring this out so here's how I did it. Please chip in if I'm doing something that is not necessary.

Make sure that the link to the docs.css file is in the <head> of your document like this. The file that I'm using the subnav in is in the root of my site hence the path.

<link href="../docs/assets/css/docs.css" rel="stylesheet">

Make sure the <body> looks like this

<body data-spy="scroll" data-target=".subnav" data-offset="50">

data-spy is for scrollspy but I leave it in as it's sweet.

You will also need the following at the end of the document, but providing you are using one on the bootstrap templates you should be fine.

<script src="/docs/assets/js/application.js"></script>

And that's it. It should work. The only problem with this approach is you get the squared background image and your logo moves to the right in the navbar but you can just comment that out in docs.css

Hope that helps.

Andreas Cederström

An hour? I dont want to rain on your parade but I just shipped in the code @fat pasted above together with the .subnav css of docs.css into my project and got a working subnav working in less than 5 minutes yesterday.

Keep in mind .subnav needs to exist in the DOM when you bind the processScroll.

If you inject a subnav with ajax just wrap the code in a function:

 var subnavfu = function(s) {
    // fix sub nav on scroll
    var $win = $(window)
      , $nav = $(s)
      , navTop = $(s).length && $(s).offset().top - 40
      , isFixed = 0

    processScroll()

    $win.on('scroll', processScroll)

    function processScroll() {
      var i, scrollTop = $win.scrollTop()
      if (scrollTop >= navTop && !isFixed) {
        isFixed = 1
        $nav.addClass('subnav-fixed')
      } else if (scrollTop <= navTop && isFixed) {
        isFixed = 0
        $nav.removeClass('subnav-fixed')
      }
    }
  };

you could use $('.subnav') instead of nav in processScroll but that would suck performence wise so dont do that.

Gavin Wye

Okay well I tried that but you lost me when you started talking about the DOM.

But, I did move the .subnav style in to the document and that resolved the background issues. Thanks

However I'm only using bootstrap to prototype some ideas and I'm not a developer so I'm sure there are better ways to do most of what I do :)

Thomas Winterstetter

@gavinwye Gavin, that was REALLY helpful. A concise walk-through on how to do it. Thank you for sharing your direct experience!

It would be great if someone javascript savvy could post the exact COMPLETE code (cut and paste) that is needed for .subnav so we don't have to load the entire application.js

Thanks.

victorhooi

Hi,

Hmm, I have to agree with @andriijas, it was fairly simple to just copy/paste the parts of docs.css and application.js that applied to subnavs.

However, I did still have some issues to it working with , but not with other elements.

It would be nice if this could be packaged up into Bootstrap proper - and I think all these hacks and discussions prove there's definitely a strong desire for it in the community.

Cheers,
Victor

Paul Vaughan

+1!

It looks great and from a UI perspective it's really very useful.

I managed to find the requisite js and css files and add them in, as well as the extra code in the

tag, but the bar jumps to the right when it fixes, but hey, baby steps. :)
Mark Otto
Owner
mdo commented March 25, 2012

Updating this issue a bit to clarify what we'll do for this component. Here's what I think we'll do:

  • add the styles for it as a standard, static component via HTML/CSS
  • abstract the javascript behavior to for fixing a component to the top as a separate plugin

We'll update with more info as we go. Thanks!

nisley

+1

quorak

+1

Ivo Benner
skython commented May 03, 2012

+1

Matthew Evans

+1

zhmenia
zhmenia commented May 10, 2012

+1

Mohammad M. AbuZer
mabuzer commented May 13, 2012

+1

David Hirmes
hirmes commented June 02, 2012

+1

pixelgamma

+1

Sephen
Sephen commented June 25, 2012

+1

Samuel Clarke

+1 :)

Daniel Ziegenberg

yay, it's there! one closed.

Richard
Michael Curry
Samuel Clarke

Why +1 it? Just to show support for a feature that I think many people, including me, would find very useful. :)

Richard Pickett

But it's had a milestone set for ages. Surely, there's no need to keep spamming the issue with +1s once it's got a milestone set.

Samuel Clarke

Pardon me missing that...I'm newer to GitHub and overlooked that. Still, even so another +1 for the 2.1.0 milestone! ;)

Miroslav Shubernetskiy

+1

Daniel Ziegenberg
bguiz
bguiz commented July 05, 2012

+1

Héliton Nordt
hnordt commented July 09, 2012

+1

Mark Otto mdo closed this July 09, 2012
Mark Otto
Owner
mdo commented July 09, 2012

The element itself has been added in 2.1.0-wip, but the javascript is not yet there. Since the affix plugin will drop with 2.1, we'll close this out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.