I'd like to change the position of menubar from top to left on tvOS.
With Menu Bar Template, can we change the position of menu bar by for example changing the style of it?
I've looked over the TVML Styles of Apple's document, but I couldn't find anything about changing the position of menubar.
If I cannot change it with Menu Bar Template, I'm thinking to try to use UIKit instead of TVML Template...
I appreciate any comments for it.
Correct, you can't change the position of the menu bar, Apple is trying to keep the UI the same all over the Apps. Which is good for your users.
You should probably look into other templates that have a vertical layout, like the stack template, or paradeTemplate which probably makes more sense in your use case.
But the worse case you can create your own with tvinterfacefactory with native code.
Related
I would like to create a navigation with CSS/styled components for React Native (so no all styling hacks and attributes will work) that looks simmmiliar to this one that the Google Tasks app uses, see this image.
What I mean is mostly the floating "+" button, the "cut off" section from the "div" bellow it and having shadow that matches correctly.
I'm really not sure how to accomplish this, especially the cut off section in a div. So, if anyone could point me in a direction then I should be fine. :)
https://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/
I am trying to use the google-nexus-website-menu options provided on the above link for the website that I am designing for my project.
For that I need to change the menu options and also the menu icons.
I am able to make other changes such as changing the size of the menu, submenu, font, width and all that. But not sure as how do I change the icons provided or how do I add any new icons in that place.
I am new to this area. so any sort of help is appreciated.
thanks.
I have a question regarding a simple tumblr theme I'm trying to make.
I've never really done a theme before and can't find specific information on what I'm trying to do.
I need to get the sidebar links to be links that you can hover over, and also be able to space the "About" from the main text without having to put white text beneath.
I also need to space the bottom of the posts with the bottom of the page more, because as you can see there's space at the top but not the bottom...
The last thing is that I need to get infinite scroll on my page so there's no need to change pages.
How do I get the sidebar and every post to be slightly bordered, the same color as the lines on the background?
I know that these are very simple questions, but I'm new to this and confused. Thanks so much!
The website name is jake-bellissimo.tumblr.com
And the code is:
http://pastebin.com/FeHSKSdu
Thanks so much!
I confess I've never made a tumblr theme, but it looks like it's some basic CSS that you need.
:hover pseudo selector and padding (box model)
Again, look at padding/margin (box model)
Infinite scroll implementation will require some custom javascript and server side code. Not sure if tumblr supports this.
Borders are also achieved with the css border property border
You'll probably need to read up on CSS before you try making a theme for tumblr. Again, I'd recommend the articles on Mozilla developer network
I'm having issues with handling Foundation on my Rails application. They are mostly related to customizations and few navigation structures.
In my assets folder I have application.css.scss and framework_and_overrides.css.scss as overriding styles which is imported in my application.css.scss and I also import "foundation" in it.
I understand the default structure of top-bar, but however I'm failing to build a two level responsive navigation as depicted in mockup:
First of all, it is difficult to change sizes, links and background color. Is there any easy way to do customization than inspecting or modifying each element?
Can I make one nav bar in two rows, every list element in this section falls under toggle, and I need to keep the language navigation bar outside the toggle and intact. If I make two separate navbars - when resizing the screen, the language one falls under the second one because all the buttons stack over. I don't think a good solution would be to override both nav bars in different ways, I hope it's not the only one.
What is the best way to make such responsive navigation?
Thanks for any help and guidance.
Have you considered using the Top-Bar and the Icon-Bar -: http://foundation.zurb.com/docs/components/icon-bar.html together? That way you could just have styled the Top bar one way and the icon bar another. Asides from the colors it looks almost exactly the same as your mock-ups.
You can do this by using CSS media tag. See this http://jsfiddle.net/8cqgumhw/
A common problem I run into when building responsive websites is how to make a multi-level nav menu (3 or more levels) that works well for touch devices. I've seen a lot of plugins and techniques, but most of them fall flat because they don't allow a 2nd-level page to act as both a link to a page AND a parent of children in a sub-sub-menu. Some techniques address this by having an arrow icon that exposes the children menu items while clicking on the parent page name goes to the actual page... but on mobile devices these icons are usually very small targets and hence hard to use. Are there any other solutions to this problem (either jquery or javascript plugins, or straight-up CSS/JS code)?
I have a 'starting point' of sorts that I use for responsive web projects like this. I'm not sure if it's exactly what you need, but it allows for multi-level dropdown menus in desktop view. In mobile view, jQuery automatically creates an off-canvas menu.
Code:
https://github.com/kthornbloom/Responsive_Template
Demo:
http://rwd.kthornbloom.com/
Hope it helps!
Have you checked out any of the documentation surrounding touch-start events? I feel like you're going to get the best ux from this method. In your position, I'd be using tap to toggle classes onto your menu that would set the display to block (for example). Once your menu is open, you could then bind another touch event to the sub-level objects.
After our discussion in comments, it seems there isn't a straight forward way to get what you want due to the fact that we don't know what the user want after the submenu has been opened. There is no way for us to tell if they want to go to a link by clicking on the item again or collapse the submenu.
From this point, you have 2 options
Create a collapse once the menu is open and the user will know to use that to collapse the menu. If you think the size on most sites are small then make it bigger, however I don't think this will be an issue because it is so common.
Create a close button or something close to that for the entire menu. So when you click an item, it will expand, and if you click the same item again, it will go to the link. However there is collapsing the submenu until you click on the overall close button for the entire menu. This is only for tablets/phones as on desktop this should be a hover behaviour. This is similar to how the menu behaves on a tablet for http://www.lexus.ca. We actually have the menu closing if you click on the top most item again, you can see this behaviour on the phone or tablet. This is another option for you if the top level navs does not lead to pages.
Found a great write-up for a solution: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly