I believe everyone would have seen, facebook mobile app. Also in many flat UI patterns website.
I would like to make one such Left menu.
THis is what I did now.
Hide the menu initially (display:none)
On click of the menu button. Show the left menu (toogle), and increase the left margin on main content using javascript (style,maregin-left:100px;)
This is working fine, but I just want to know, is this the best practice, and will this responsive?
The design pattern is known as 'off canvas' layout.
Depending on the nature of the content you might not want to have it hidden on larger screen, depends on your requirements.
There is a good example of what I mean here: http://jasonweaver.name/lab/offcanvas/
Where the navigation is visible on full screen and hidden on smaller mobile viewports.
what you re doing is good but for best practice i will use the css3 transform with translate some thing like this
.menu{ -webkit-transform:translateX(-200px)
from there you can use the toggleClass("active") from jquery
.menu.active{-webkit-transfrom:translateX(0)}
hope this help!
Yes, this is a perfectly fine approach and it should behave responsively since it's only taking up 100px of width. If it was a full screen horizontal drop-down menu, then you would have to make sure its contents are responsive, but a 100px wide vertical menu will be fine on just about any resolution (especially if the user can choose to toggle it open or closed).
Related
My navbar overlaps/wraps to a second line when the screen resizes/reduces. This looks messy. I have used a toggle button for media devices, but this doesn't address the issue of when people resize the window.
There are two websites I can give an example of what I am hoping to achieve with my navbar/page:
https://www.facebook.com/
http://www.dailymail.co.uk/home/index.html
Note with both of these websites, that when the screen is resized, the page remains the same; although the window is reduced, nothing on the page is reduced. The navbar remains the same.
This is what I would like to achieve, but I'm not sure how?
And is it possible to achieve this with just the menu/navbar? Rather than making the whole website fixed in position?
All replies will be much appreciated!
Thanks!
John.
Try to style your navbar elements with display:table-cell and parent should be display:table.
Or you can go with flex.
I wanna know if it's possible to edit chrome/chromium devtools layout.
The reason is with a x Width > actualWidth, the layout is the left one (this is what i want as full time layout) and over the x Width < actualWidth, the layout change with the right one and I got square monitor so I can put the width too much if I want to see my render and the code javascript side-by-side.
So does it have a way to edit the devtools layout? If there is a way, how I can change the devtools layout?
Layout sample
Note: I'm using the right layout (dock to right)
Thanks for the answer
In the tab area for the content you are editing. On each side there is an icon that looks like a triangle towards a sidebar. Click that and it will hide the sidebar it is beside to give you more space.
Beyond that, you can click the overflow menu in the primary panel menu (the three icons beside the close button) and then select "Dock to Bottom" from the top layout choices.
Finally, the latest method available is to go into the Settings. Then under "Appearance" find Panel layout and change that to horizontal. This will then force the panels in elements and sources at least to be at the bottom always.
Each of these methods should provide you more area to work.
i'm a newbie / self-taught html guy. I need to edit my (static) website's menu to make it mobile friendly for google within the next 4 days. I'm breaking my head trying to figure out how to do it, but no luck so far, so I'm getting desperate.
The way I'm making my entire website mobile friendly is by setting the viewport and changing the CSS if screen width is less than Xpx.
I need to use ONLY CSS to transform the following menu, to a menu button. ie in mobile view, have the entire menu hidden within a button at the top of the screen and make the menu appear/dropdown by clicking on the button.
This is a sample menu I have on my website: www.oikotrust.gr/en
And here's the mobile friendly one I managed so far (uploaded it here just for reference): www.oikotrust.gr/index-mobile.html
<div class="menu">
<div class="menu_btn here">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</div>
<div class="menu_btn">ΕΝΟΙΚΙΟ</div>
<div class="menu_btn">ΦΩΤΟΓΡΑΦΙΕΣ</div>
<div class="menu_btn">ΕΠΙΚΟΙΝΩΝΙΑ</div>
</div>
related CSS in original page
.menu{margin-top:50px; float:left; margin-left:none;}
.menu_btn{height:35px; font-weight:bold; padding-top:10px; width:100%; padding-left:20px; font-size:18px;}
.here{background-image:none; background-repeat:no-repeat; color:#E5541C;}
All and any help much appreciated!
you don't need to "transform" the menu, not neccessarely. You can use media queries to style your content depending on your viewport, and use visibility property to set up different elements for different viewports.
Small tip: always write the css for wider media queries at the top, following with the smaller wide media queries next until you get to your smallest viewport.
I wrote an article a while ago maybe this will help you:
http://readingssexy.com/blogpost/how-to-use-media-queries.html
As class menu is the parent class for all its subchild you can hide this class using media query for mobile screens, you can put a div just above your menu and place your button code there so what will happen is, on mobile screen you menu will be hidden first when user will click on this button you can show menu to him or toggle the menu open/close state. Hope you get this.
I'm using jquery mobile for a project which has a list-view and list-divider in it. I would like to make it so the list dividers stop scrolling when they get to the top of the page, and then keep scrolling again when another list divider bumps into it. For an example of what I mean, check out the iphone "contact's" app. Each letter (which is a list divider) stays at the top of the screen while you are still scrolling through contacts within that letter.
I've tried fixing the position but that obviously is not quite what I want. Is there a way to fix it only when it is at the top of the page? and then "un-fix" it as soon as a different list divider comes up below it?
The jQuery ScrollToFixed plugin is exactly what you are looking for. The examples will show you how to use the plugin.
Based on your description, I would say that the easiest way to accomplish this is to give each list divider a z-index greater than the one it overrides. That way you do not have to deal with minimum and maximum offsets, instead the overriding element will simply be layered on top of the previous one.
I want to build a website that has 4 buttons on the left, which change the text in the main window of the site (traditionally that they would take the user to another seperate page).
What I would like it to do is not have to go to another page when the button is click, but rather to hide the text that is in the main window, and change it to the text that is for that new page.
Is there a way to hide the text, and show different text, using CSS?
Thanks for any help.
It is possible with CSS 2 and no javascript. I made an example for you to see here:
http://jsfiddle.net/theguywholikeslinux/QQrFy/
I haven't actually tested it for browser compatibility but I believe it works in most browsers that support css 2 and positioning reasonably well (including older versions of IE). Accessibility will be perfectly fine as long as you don't mind screen readers reading each page at a time all in one go. (although some confusion might be caused by the links).
Essentially there are 4 divs that all have an id set and a specific width, height and positioning (essentially they are all on top of each other). The links are href="#id#" and when you click them the relevant div comes to the top of the stack so you can see it.)
Only downsides are it can cause weird scrolling problems (e.g links at top of page, content to change all the way at the bottom) and you have to have the same fixed size for all of the elements. So if you want to have pages like this that are going to be more than ~700px tall then your pages that only include 200px of content will still scroll down for another 500px.
You cannot do this in css2! You need a javascript
Update:
You can do it with css 3. Please see example: http://jsfiddle.net/RUDyw/
found here: http://dev.opera.com/articles/view/css3-show-and-hide/
No, you need javascript. JQuery or something of the likes will make it easy.
$('#button1').click(function() {
$('#mainwindowtext').text("new text");
});