Recently I am creating a page with a small menu in the content, just to switch between different content topics. Nearly similar to a small slideshow, just with a simple line navigation above the content with the different topics.
So I am just looking through the web to find some alternative ideas for the typicall hamburger icon for the mobile version, since I am using it already for the main navigation.
I found this:
'http://codepen.io/fbrz/pen/bNdMwZ'
I dont want to use the pull-down function, but I love how the different menuitems appear and come from outside the content area in focus.
So I had the Idea of maybe just using the swipe menu-items, without the pull down function.
So my question is, did anybody of you have found or even created a similar navigation somewhere, and if yes where? I would love to find some more options/ideas?
Thanks as always for your input!
I think this could be something useful for you
Scroll Overflow Menu
Related
currently I am creating a website with horizontal scrolling based on Elementor's official video tutorial. and the code they provide in the video description.
Unfortunately they didn't explain how to make the website scroll to anchor IDs. When doing so, either nothing happens or the page scrolls weirdly vertically and then horizontally to the desired section.
Do you have any ideas how to solve this issue? I'm glad for any ideas!
I already tried to add JS code snippets but nothing of it worked :(
In the website I am currently creating, I am using Angular 8 (not sure whether the component paradigm has an influence on my troubles with scrollbars).
Like most websites, I need to implement a scrollbar in case the data does not fit the screen. But as I added more and more components, I realized that the way I used scrollbars was confusing and I ended up not being able to implement the behaviour I wanted.
I looked on the Internet but most ressources explain how to customize scrollbars, which is not what I am looking for. The article explaining the few CSS overflow properties were not very useful as well, because I did not have what I wanted, even though I kind of have tried every possibility (at least most I could think of).
Do you have any piece of advice to manage scrollbars ? Good practices & so on.
Currently the behaviour I am trying to implement is the following :
I have a home component containing a navbar and a router-outlet. The navbar is actually overflowing (because of box-shadow and an icon).
The router-outlet contains (if on the right page) a sidebar on the left side which represent a list of emails, and the content on the right. I don't want a global scrolling because I would have a empty space above the sidebar (where the navbar should have been but is gone because of scroll). I would need a scroll for the sidebar, and a scroll for the content.
So if you have any ressource which could help me understand how to use these scrollbars and manage them elegantly, that would be super appreciated :)
Try this perfect-scrollbar which is used for Angular 8.
I am a beginner at jQuery and I have been trying to place more than one div in one slide bar. Basically, I am working on auction site and I want a DIV which displays more than one item in same div with “Next” and “Previous” button arrows.
For example:
When you visit an auction site, one slide-bar should appear containing more than one item (multiple DIVs). The slide-bar should have a text that appears, saying “newly arrived item or recommended for you etc.”
Here's a screenshot of what I mean:
Is there any way to achieve this using jQuery? I have just recently started working with jQuery and I am stuck. Any help is much appreciated.
Assuming that “building your own” isn't an option for you, you could take a look at jQuery plugins like Smooth DIV Scroll, or any alike plugin that scrolls content horizontally left or right.
Generally, one of the nice places to find a multitude of jQuery plugins would be (for example) the jquery-plugins.net website. There you'll find usable plugins for what you're trying to do. Just one of many available there that also does what you're looking for: Any List Scroller – jQuery Plugin To Scroll Lists.
As said, there's more than a dozen alike plugins scattered all over the internet. All you need to do is to deciding which one fits your individual site best. In case of doubt, fire up your favorite search engine and look for “jquery div scroller”.
I need to create a mega menu similar to something used for this website.
this image may give more idea about what i am trying to achieve.
So far i am not able to find anything similar to the one used on website.
I came across jQuery Tools website with nice tabs. I am trying to integrate this my menu so that i can get an impression of mega menus.
So far i am not sure how i can integrate it will my navigation and make it look somthing similar to what is show in the image above.
I tried to make changes to css so that description div will show up next to sub menu but it is not coming up right.
Help in this regard is appreciated.
MY CODE of jsFiddle
I would appreciate help in this reading.
I have this website; http://kieronboz.co.uk/inspired/
Im a beginner to web design, so forgive me :P
If you click on the top link in the ugly navigation bar on the left, a new page is loaded, I thought it might be a good idea to now shrink the header image for the non-main pages, so I was thinking a jquery script to make it 'slide' up when the page is loaded, to the top of the light white border around Inspired Marketing, so it would turn into a smaller header!
Anyway, problem is I cant find anything like this in google, I have seen the jquery slideup function but im having trouble implementing it in such a naked fashion as the code reference sheets present it.
If this is a terrible idea and there's better options, ill hear those too! Thanks again
Simply add to the header the margin-top: -540px; (or via jquery: $("#header").css("marginTop","-540px");
You may use jquery.animate to add an animation to it.
As to doing it only on pages that are not the index - Either include the script doing it only to non-index pages, or use document.location.href to figure out whether you're on index or not.