You have a very basic understanding of web code. Most of this looks like a foreign language to you, if not all of it. You're brand new to web design/development. I honestly don’t see a single advantage that a data attribute has over an href in this particular situation, and I’m wondering why you chose that approach. And finally, it’d also save you the added step of having to append a hashtag to the id, since lines 8-9 of your JS would simply be: Additionally, search engines like Google understand anchor links like the one I’m describing above, allowing it to link to a section of the page in the Google result, as opposed to just the page. Additionally, this would still work even if JavaScript is disabled, or stopped, because it’d simply fall back to the native anchor jump behavior that all browsers support natively. Using the href tag means that if someone middle clicks the link to open it in a new tab, it will correctly open the page and automatically jump to the correct section on page load. So a friend of mine sent me this tutorial to get my thoughts on it, since he’s new to webdev and I’m not, and after skimming through it, I’ve gotta ask… why are you bothering using data-id to specify a target? The href in an anchor tag is literally designed for the exact behavior you’re looking to accomplish, but in a more semantically correct fashion. □ since together they would act as expected ahahah, sorry, any hint would be welcome. Well :-)) would you like to mix the two solutions? Manually clicking the navigation toggle button, the menu closes and you can verify that the page has correctly reached/scrolled to the expected anchor / idĮvelyn solution instead fails at all, when you click the menu toggle button, the navigation menu appears and when you click on the dropdown menu item, the page doesn’t scroll/goto the selected anchor/id and instead the menu closes/collapses as expected. It only closes/collapses the dropdown list (which in the mobile version of the navigation only makes “longer” the navigation items list, so it shortens but the other items list remains visible and obviously occupies the whole screen, giving the feeling that nothing have happen, bad user experience). Though and unfortunately, both your solutions fails totally or partially (at least on blackberry OS 10) when it is used this kind of navigation barĪnd the items in the dropdown menu item, are pointing into the same page (anchors / ids)Īli solution goes really to the anchor / id, but next fails to re-collapse/close the menu. Hello to both Evelyn and thank you so much to Ali There’a a lot of room for creativity with this sort of page, so hopefully it’s a good starting point for you to build something amazing! MainNav.css("height", "1px").removeClass("in").addClass("collapse") Īnd that’s it! A simple, yet effective way to build a responsive scrolling webpage. We will add some simple CSS for the page sections and typography, but nothing crazy.header, speed) Luckily, Bootstrap provides default styling for the responsive navigation, so have minimal header styling to do. scroll-link class and data-id attribute to any links on the page, not just nav links.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |