Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add subnav component and behavior to BS core #1189

Closed
dbpolito opened this Issue · 61 comments
@dbpolito

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

@Anahkiasen

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

@mdo
Admin

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.

@t1mmen

+1

@anandanjaria

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

@mdo
Admin

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

@darklow

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

@splaice

+1

@nnordrum

+1

@g00fy-

+1

@ADO

+1

@Tuckie

+1

@fat
Admin

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.

@thomaswinterstetter

@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

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

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.

@gavinwye

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

@thomaswinterstetter

@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

@vaughany

+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
Admin

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

@skython

+1

@zhmenia

+1

@mabuzer

+1

@hirmes

+1

@Sephen

+1

@ziegenberg

yay, it's there! one closed.

@richwestcoast
@inactivist
@samuelclarke

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

@richardp-au

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

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

@miki725

+1

@ziegenberg
@bguiz

+1

@hnordt

+1

@mdo
Admin

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 mdo closed this
@cvrebert cvrebert locked and limited conversation to collaborators
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Something went wrong with that request. Please try again.