Add subnav component and behavior to BS core #1189

dbpolito · 2012-01-25T11:30:40Z

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

dwightwatson · 2012-01-25T13:03:40Z

+1

Anahkiasen · 2012-01-25T13:09:34Z

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

alienlebarge · 2012-01-25T13:40:14Z

+1

mdo · 2012-01-25T18:16:21Z

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.

wjrichardson · 2012-01-25T23:19:17Z

+1

simonfranz · 2012-01-26T11:04:33Z

+1

sindresorhus · 2012-01-26T11:44:34Z

👍

t1mmen · 2012-01-27T07:35:36Z

+1

andriijas · 2012-01-27T07:45:53Z

+1

anandanjaria · 2012-01-28T17:26:16Z

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

TuckerWhitehouse · 2012-01-29T00:02:00Z

+1

thomasfedb · 2012-01-30T11:36:35Z

+1

mdo · 2012-01-30T16:17:33Z

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

quangbahoa · 2012-02-01T13:35:39Z

+1

pierrebeitz · 2012-02-02T23:27:05Z

+1

darklow · 2012-02-04T09:14:51Z

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

splaice · 2012-02-04T22:37:26Z

+1

PiotrKaczor · 2012-02-05T00:14:26Z

👍

KonstantinReido · 2012-02-07T12:04:23Z

+1

nnordrum · 2012-02-07T17:10:28Z

+1

meshakeeb · 2012-02-14T13:32:14Z

+1

g00fy- · 2012-02-15T18:24:34Z

+1

ADO · 2012-02-15T22:20:30Z

+1

palpalani · 2012-02-17T06:39:57Z

👍

Tuckie · 2012-02-21T17:18:07Z

+1

akennedy · 2012-02-22T04:10:51Z

+1

fat · 2012-02-25T06:24:13Z

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.

winterstetter · 2012-03-07T18:10:08Z

@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!

gavinwye · 2012-03-08T13:02:52Z

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.

andriijas · 2012-03-08T13:09:14Z

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.

vaughany · 2012-03-22T11:00:15Z

+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. :)

mdo · 2012-03-25T07:23:51Z

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!

slawosz · 2012-04-12T06:21:07Z

👍

nisley · 2012-04-24T01:54:51Z

+1

quorak · 2012-04-30T16:25:52Z

+1

skython · 2012-05-03T11:58:05Z

+1

add1ct3dd · 2012-05-03T12:50:05Z

+1

eugenesaur · 2012-05-10T15:53:27Z

+1

mabuzer · 2012-05-13T09:25:30Z

+1

richwestcoast · 2012-05-17T08:26:21Z

👍

inactivist · 2012-05-27T00:34:20Z

👍

testeria · 2012-05-31T10:49:12Z

👍

hirmes · 2012-06-02T17:21:57Z

+1

XavierColombel · 2012-06-04T20:00:02Z

+1

Sephen · 2012-06-26T06:21:50Z

+1

samuelclarke · 2012-06-27T05:25:30Z

+1 :)

ziegenberg · 2012-06-27T23:22:58Z

yay, it's there! one closed.

richwestcoast · 2012-06-27T23:24:07Z

Ye not sure why peeps were +1ing the topic, its been there for a while.. Trying to be part of the cool kid crowd? :P
------Original Message------
From: Daniel Ziegenberg
To: Richard Winder
Subject: Re: [bootstrap] Add subnav component and behavior to BS core (#1189)
Sent: 28 Jun 2012 00:23

yay, it's there! one closed.

Reply to this email directly or view it on GitHub:
#1189 (comment)

Sent from my BlackBerry® wireless device

inactivist · 2012-06-28T00:51:10Z

On 6/27/2012 4:24 PM, Richard wrote:

Ye not sure why peeps were +1ing the topic, its been there for a while.. Trying to be part of the cool kid crowd? :P

Because it's tagged as 'open'...?

samuelclarke · 2012-06-28T00:53:52Z

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

richardp-au · 2012-06-28T00:56:10Z

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.

samuelclarke · 2012-06-28T00:59:31Z

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

miki725 · 2012-07-02T14:10:43Z

+1

ziegenberg · 2012-07-02T15:19:42Z

Shouldn't someone close this ticket as it's closed for the next version?

+1

bguiz · 2012-07-06T01:48:02Z

+1

hnordt · 2012-07-09T14:21:45Z

+1

mdo · 2012-07-10T05:18:03Z

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.

mdo mentioned this issue Mar 25, 2012

Add support for standard navbar to perform like the subnav from docs #2785

Closed

mdo closed this as completed Jul 10, 2012

twbs locked and limited conversation to collaborators Jun 9, 2014

Add subnav component and behavior to BS core #1189

Add subnav component and behavior to BS core #1189

Comments

dbpolito commented Jan 25, 2012

dwightwatson commented Jan 25, 2012

Anahkiasen commented Jan 25, 2012

alienlebarge commented Jan 25, 2012

mdo commented Jan 25, 2012

wjrichardson commented Jan 25, 2012

simonfranz commented Jan 26, 2012

sindresorhus commented Jan 26, 2012

t1mmen commented Jan 27, 2012

andriijas commented Jan 27, 2012

anandanjaria commented Jan 28, 2012

TuckerWhitehouse commented Jan 29, 2012

thomasfedb commented Jan 30, 2012

mdo commented Jan 30, 2012

quangbahoa commented Feb 1, 2012

pierrebeitz commented Feb 2, 2012

darklow commented Feb 4, 2012

splaice commented Feb 4, 2012

PiotrKaczor commented Feb 5, 2012

KonstantinReido commented Feb 7, 2012

nnordrum commented Feb 7, 2012

meshakeeb commented Feb 14, 2012

g00fy- commented Feb 15, 2012

ADO commented Feb 15, 2012

palpalani commented Feb 17, 2012

Tuckie commented Feb 21, 2012

akennedy commented Feb 22, 2012

fat commented Feb 25, 2012

winterstetter commented Mar 7, 2012

gavinwye commented Mar 8, 2012

andriijas commented Mar 8, 2012

vaughany commented Mar 22, 2012

mdo commented Mar 25, 2012

slawosz commented Apr 12, 2012

nisley commented Apr 24, 2012

quorak commented Apr 30, 2012

skython commented May 3, 2012

add1ct3dd commented May 3, 2012

eugenesaur commented May 10, 2012

mabuzer commented May 13, 2012

richwestcoast commented May 17, 2012

inactivist commented May 27, 2012

testeria commented May 31, 2012

hirmes commented Jun 2, 2012

XavierColombel commented Jun 4, 2012

Sephen commented Jun 26, 2012

samuelclarke commented Jun 27, 2012

ziegenberg commented Jun 27, 2012

richwestcoast commented Jun 27, 2012

inactivist commented Jun 28, 2012

samuelclarke commented Jun 28, 2012

richardp-au commented Jun 28, 2012

samuelclarke commented Jun 28, 2012

miki725 commented Jul 2, 2012

ziegenberg commented Jul 2, 2012

bguiz commented Jul 6, 2012

hnordt commented Jul 9, 2012

mdo commented Jul 10, 2012