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.
Related
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.
I'm working on a CMS system where the user has the ability to select between a number of different templates for their site. When they select from the list of templates on the left I want the middle of the page to show the preview of the template and the right side to show a property inspector for manipulating things like colors, font sizes, sections, etc. Clicking on an element inside the preview changes what is focused and thus changes the property inspector.
The big challenge is that the templates are designed by 3rd party designers and the CSS is designed with the expectation that there is no other CSS (like the CSS for the CMS). I might force them to restrict everything their design to work on any page and to always have a top level DIV that I can just inject into the page.
I could IFRAME it but that is not ideal because DOM manipulation becomes more complicated.
Ultimately I have full control over the template structure and how they are made but I'd like to keep it as simple as possible for designers.
What's the best way to go about structuring this kind of setup?
Given the requirements of no iframe (which would be the right way), I see 2 solutions:
Put the template in a div with a certain class/id and preprocess the CSS to prefix every selector with that class.
Use the Shadow DOM, but then you would only target Chrome.
I'm seeking to emulate the on-clickable input forms that pops up when an user clicks on the blue bar as shown above. My experience with front-end development is limited so I don't know what to call these elements exactly, but let's say they are on-clickable input forms contained in a box, which can lead to other on-clickable forms like the date picker as shown.
How do I do this in Javascript? Preferably with AngularJS, since the app I'm working on uses that. I don't mind using JQuery though.
I'm not looking for detailed step-by-step instructions (which I don't mind), but hints to get me started on cloning these features.
Thanks.
The pop-ups you see are going to be HTML elements, probably <div>s. The page will use JavaScript to create event listeners on the bars to hide/show them when the bars are clicked/moused over. The "pop-ups" are really just like any other element in the page, but with a higher Z-index and using CSS positioning (most likely absolute) to make it appear as a pop-up. It also looks like they're using the CSS arrow trick to draw the speech bubble pointer, though it could also be accomplished with images.
If I were to develop this, I'd break it down into stages like this:
Get my pop-up into my HTML page, and make sure it's not appearing anywhere.
Make it show/hide when I wanted it to (either when the blue bar is clicked, or when the user mouses in/mouses out of the blue bar).
Make it show/hide where I want it to (near the blue bar)
Make it look better (work on the CSS and get the pointer to work properly)
Convert that work into a second-level popout. The second level is going to be the exact same technique, but maybe the CSS classes are going to be different so the second bubbles look different and have the pointer at a different position.
Of course, you don't have to develop this functionality yourself. There are also a number of jQuery plugins you could use, as well as Bootstrap's popover component.
What would be the points you validate when considering a new menu for your website?
Why should i choose complete CSS based menu ?
Why should i choose Javascript/CSS based menu ?
whats is the benefit in choosing either of them?
Is CSS menu old ? or is it limited in features! I dont think CSS menu is old as i still a pick a thousand web2.0 site using complete CSS menu (No javascript to control its dropdowns).
I default to pure CSS unless there is something I can't pull off with CSS animations, then I'll consider switching to JS. It's pretty rare you'll need the JS unless you need some fancy timed animation across multiple elements or something wacky that CSS animations can't handle.
Using pure CSS the menu still works even when the client has JS disabled. Plus with pure CSS it's usually less code, which is always nice.
A nice way to look at it: would you use JS to change the color of a link when you hover over it, or CSS? This is just a more complicated, but usually similar, question.
CSS controls the layout (and limited interactions, such as hover) while Javascript controls logic.
If you don't need any logic in your menu (such as displaying a hidden div element as a submenu), then using CSS on its own is just fine.
It's about html/css/javascript menu ;)
I am looking for unified solution to hide extra tabs of horizontal/tabbed menu when it overflows it's container.
The initial idea plagiarized from firefox tabs workflow, i.e. when you have too much tabs it will wrap extra ones into collapsible dropdown button "List all tabs".
I am thinking to play with overflow:auto in conjunction with javascript, but is there anything like this already implemented or maybe some better idea?
Thanks.
overflow:auto may be a difficult if not impossible thing to accurately monitor with javascript. There are two things you should probably monitor here: a parent container, and the UL that contains the tabs (presumably links within LIs). You can make quantitative comparisons between the widths of both elements in javascript pretty reliably.
I'm not sure which library you prefer to use, but YUI has a really powerful utility that would be applicable - Region. It returns an object full of useful properties about an element - its position in the document, size, and intersections with other elements (see http://www.wait-till-i.com/2007/08/28/monitoring-element-size-and-position-with-the-yui/).
Regardless of what library you end up using (or none at all), the concepts behind Region should help you get moving in the right direction.