I am trying to make a sidebar using Semantic-UI which, when collapsed, still has a portion visible. Something like this, to be more precise. I have tried looking in the semantic-ui css source, hoping to find something that might be of help, unfortunately, I couldn't find anything that could be useful.
Is there any possible way of doing it using semantic, without having to write the whole sidebar javascript/css from scratch? Any help would be appreciated
This is exactly what the sidebar component is for. See examples here: http://semantic-ui.com/modules/sidebar.html#/examples
Related
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.
Been working with Bootstrap for a little bit, but am working without it on a new project.
Was curious whether anyone knew of an alternative, easy-to-use plugin to Bootstrap's 'affix'.
I'm really just looking for an element to go to position:fixed upon a certain scroll point (ideally defined by an element), stop at a particular scroll point (ideally defined by a page footer).
Maybe jquery stickem plugin? As stated in their README
Make items sticky as you scroll, to a point.
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
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.
Here is my app - http://www.shalgreetings.com/ I am trying to override the scroll bar going down to a imagesection in CSS, so that whole app is visible with logo, header and other controls all the times when people navigate through different #sections. I am not sure where in the CSS, I am making the mistake as clicking on #sections traverses the page. Here is this app's original inspiration code, which has got this right.
Anyone can point me where the problem seems to be in the above app?
Edit - It was not a problem with CSS. Perhaps I am looking for a Javascript solution that would follow the link, but still ScrollTo(0,0).
There is no mistake in your CSS, the inspiration code "cheated" in a way: he used just a few photos so the viewport would never be too short to display everything. In the example you can make your window height short and it will exhibit the same problem.
You probably already know that you can solve this problem with a bit of javascript (onclick="return false;"). I'm afraid there is no pure CSS way from preventing this from happening.