We Keep Coding

Custom Navbar Dropdown

I'm wanting to implement something similar to following dropdown feature on my website, however I have limited skills in this area. Is there a css library I can use to get the desired result? Or will I have to manually create this myself?
Any examples would be appreciated.

Use BootStrap's Dropdowns. It supports images inside the text area. Overwrite the CSS so that it looks similar to the dropdown in the image. This way you won't need to rewrite everything.
https://getbootstrap.com/docs/4.0/components/dropdowns/

Responsive split menu in Typo3

I want to add a split menu to a Typo3 site that shall also be responsive for mobile screens.
So far I have solved it with two separate menus using lib.mainMenu.special.value = x,y,z on both sides (left and right). The problem is how to merge the two menus to one in responsive mobile viewport.
All pages are at the same level in the tree (but this is not a must).
Any ideas, solutions, scripts or tutorials?

Depending on your framework you either have already some mechanism for changes of menu-display or you need to create your own.
Frameworks like bootstrap already use javascript to dublicate your menu into a hidden one for displaying it in the 'burger-menu' on small screens.
You can do the same: render the menu in the complexest view and rebuild other variants with javascript.
pro: smaller html, faster server-response.
con: work to do in the client, additional JS.
You also can build all versions in TYPO3 and render them and only CSS decides what to display in current screen resolution.
pro: complexer or more different markup for different versions are easier to handle, no DOM-changes at the client
con: more rendering time, bigger HTML
it depends on the complexity of the design:
is the menu splitted inside the HTML?
how much differ the splitted and joined version for each entry?

There are several approaches that could help
The oldest (and outdated IMO) is yaml css. There you could use the layout to (re)sort columns.
A nice approach I just used for a project is flexbox-layout, there you can resort, and restructure almost independent from HTML-structure. One source for explanations is css-tricks.com
another possibility is using css grid layout, you can read about it on css-tricks.com too.
with Javascript and the DOM-model you can do almost everything, you can manipulate whatever you want, it's just a matter if you like the menu determined by JS, i.e. for accessible-aspects I avoid it usually, at least on that level you like to reach.
another option is to restructure the menu, i.e adding already the 2nd menu to the first one, but using breakpoints to show it or hide it (and the 2nd menu in the right sidebar).
my preference is to create the menu(s) that only display has to be change depending on the device, but nothing has to be hidden or created double, just the styling is changing based on breakpoints.

I have solved it by hiding the menu items I want on the right side and wrapped every item with either "hide0" or "hide1" with
NO.wrapItemAndSub = <li class="hide{field:nav_hide}">|</li>
NO.wrapItemAndSub.insertData = 1
doNotLinkIt.field = nav_hide
JavaScript and CSS does the rest. Now I can display non-hidden elements in the left menu, hidden ones in the right menu and the responsive menu displays all. Thanks for the help.

Angular2, "replace" scrollbar

I have an angular app with a scrollable sidenav.
This sidenav has the native ugly scrollbar. I want to replace this one with a styleable scrollbar.
Are there any good solutions for angular 2 which don't require jQuery?
Do I have to use an external JavaScript solution which doesn't rely on angular?
Thanks in advance!
PS: If important, I use Angular Material 2
PPS: I've already tried gemini-scrollbar, but this has broken the width of the sidenav and simplebar which has caused a ram overflow.
Edit:
I want to replase this ugly scrollbar:

Try using the OVERVIEW EXAMPLE its better than Example tap section
this one:

You don't need JQuery to archive this task. It's pretty simple and easy to use ADD to do this. There's a example in this link https://css-tricks.com/almanac/properties/s/scrollbar/

Using Enquire for layout as opposed to using CSS for layout

I am aware of the fact that layout and function of a site should be strictly separated. Layout should be done with CSS and functions of the site, like expand mobile menu on click, should be done with JS.
Reference:1. & 2.
What I often see happening for responsive layouts is having column classes for the various media queries, where just the class name is different, however the width values are identical.
This then leads to HTML in the form of
<div class="container small-query-columns-4 medium-query-columns-6 large-query-columns-12><p>Responsive paragraph..</p></div>.
Would it be acceptable to instead of always defining the same width for columns for various media queries to just make a minimal CSS grid, where the column classes widths are defined once and then dynamically pass those per media query with Enquire?
I know this ruins the above given separation from layout (CSS) and function (JS), though it would mean much cleaner HTML, and this per each media query plus much less CSS as well. Enquire also only calls once per media query so the hit on the amount to download would also be much less with a minimal CSS file. Yes, of course, this means the site is JS depended.

That's not bad idea but I think that it is not good idea too. I had thought about something similar few weeks ago. I wanted to make CSS which will be compiled in browser via JS in few loops and then appended to head section. But after deep thinking I decided to not doing that.
I know that you can make fallbacks and some fancy stuff so it works in every browser with or without js, but I have looked at my grid. It takes less than 10KB. It's interesting idea, but it isn't worh so much work as it will take. Keep your HTML organised and you won't run into issue with too many css classes. You have to let someone who use your "framework" do define widths at certain breakpoints. Easiest thing to do is just write a class name.
Consider that when you use for example bootstrap and want to have 12 columns on mobile, you just don't define it and it automatically falls into that width. Many times it just enough to define max 2 breakpoints with css classes.
When I think about enquirejs I think that it can be used for hiding sliders on mobile for example. When you just display: none it still running and changing classes. If you have something similiar what should be removed because mobile is not good environment for running something, you can disable it by using enquire. Another example is mansory grid, which you can start and disable via enquirejs.
Basically you can use it if you have something already js-depended and want to customize it on diffrent screens, or give diffrent behavior, because if you just set something on window load or document load, you have an issue with someone who resizes window. Here you can use it.

Table with vertical scroll and pages for horizontal

I have a table that have important information in left column and in the top row, therefore these should always be visible, I then want to have Pages in the bottem for horizontal "scrolling" and a normal scroll for vertical scrolling.
Is there a Jquery script that supports this?
It would look something like this

If your requirement is to display basic data then you could use one of the Jquery plugins available for this purpose like Datatables. They are very flexible and you could do most of the basic things using one of their extra's.
If your requirement is more than just displaying data. It has complex edits, custom features for each column and stuff then your better of with a custom implementation. We've build such a table which has integrated autopopulates, calendar and other completely custom features by having a div float beside the table and using Jquery to control the scroll. The header and the frozen column on the left are usually separate tables/divs themselves and are just aligned as per the table using Jquery. They work quite well for IE 8+ and other browsers.

Does this work? (I used CSS, not jQuery, sorry)
http://jsfiddle.net/mAnQp/
Update: added pages
http://jsfiddle.net/mAnQp/3/