Viewing Navigation Bar Problem
Navigation Bar Problem
|
User: Robert.tilly 12 years ago
|
|
|
Hi, I still have a problem with a navigation bar. It seems ok in the browser but on Iphone and on Ipad it messed up. Also in the browser there is a big problem with the submenus. Now I publish my site to the web because is easier for you. This site will be my website, but there are more work to do. So is still in beta <!-- s:-) --><img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":-)" title="Smile" /><!-- s:-) --> Please help My site: www.elemazalmom.hu |
|
|
User: Roddy 12 years ago
|
|
|
Conventional navigation menus as a whole are not suitable for mobile devices since the touch area is too small. Mobile devices don't react to mouseover because you don't use a mouse with them! Therefore a drop down menu doesn't work. While a conventional design like yours is viewable on larger tablets, you still need to reconsider the way in which you implement user input controls and make sure that they are compatible with these devices. A fixed width design is never going to be any good on a device like a smart phone. You either need to create a separate mobile website or use a responsive design. You can see from this example how a responsive design works and how the navigation style changes for smaller devices if you drag the browser window down in width... http://www.ezmacwebdesign.com/Demo/toast/demo.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Robert.tilly 12 years ago
|
|
|
Hi, Thanks for your answer about responsive design. It was very helpful, but my really problem is how the navigation works in desktop browser. For mobile devices I'll do a different site. In browser is still buggy. Thanks Robert |
|
|
User: Roddy 12 years ago
|
|
|
Your navigation appears to work well for me using a desktop browser. What problems do you see?
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Robert.tilly 12 years ago
|
|
|
Hi, Look at the third button. The third submenu is on the second Robert |
|
|
User: Roddy 12 years ago
|
|
|
You would need to show us a screenshot of the left column in EasyWeb for us to understand this.
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Robert.tilly 12 years ago
|
|
| Ok here it is | |
 890.png |
|
|
User: Roddy 12 years ago
|
|
|
The second page in the menu has no sub menu. It is a page and not a directory.
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Robert.tilly 12 years ago
|
|
|
User: Roddy 12 years ago
|
|
|
OK, now I see what you are saying. The EasyWeb menu doesn't allow for adding a directory inside a directory since this creates a third level to the menu. To do this the CSS would have to be modified by creating a class for a ul ul ul (sub, sub menu and the ul ul (sub menu) would have to be increased in width to accommodate it. You would need to request this but I shouldn't image many users will want to create a site structure of this complexity. I have a demo if this type of menu here... http://roddymckay.com/EasyWeb/drop-down-menu.html Its not that hard to do and the trick is to reverse the last sub and sub sub menus so that they don't disappear off the page if the menu is the full width of the page. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Robert.tilly 12 years ago
|
|
|
Thanks for your answer It's a bit complicated for me but I'll to do that. Thanks Robert |
|
|
User: Roddy 12 years ago
|
|
|
A picture is worth a thousand words. This is a navigation with a third level...  In this shot you will see that I have added a colored background to show the extra width (and height) given to the second level unordered list to accommodate the third level...  The CSS would be like this... nav ul ul {width: 320px} /* width to fit in third level menu */ nav ul ul li {width:160px}/* sets width of the second level menu */ nav ul ul ul{ left:160px;width:160px}/* third level drop-down box */ So the third level list is positioned 160px from the left to clear the second level menu. You also need some extra height since the third level list drops below the second. Here's how I have done it in this example... nav > ul > li:hover ul, nav > ul > li > a:hover ul, nav ul ul li:hover > ul, nav ul ul li a:hover > ul {height:150px} /* height to accommodate third level menus */ This last line may look strange and complicated but all it's doing is applying the same rule to these children of the parent element. This allows you to change it only once in the CSS when you may have to alter the dimension at some point to accommodate more list items. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 12 years ago
|
|
|
Here's a demo of the smooth scrolling drop down menu and a mobile style menu. I've included both in a responsive page so that you can switch between the two and see the differences... http://ezmacwebdesign.com/Demo/codebox/codebox-menu.html Obviously you can't create a responsive page like this in EasyWeb at this time so you would build a mobile version of your website and use the alternative menu in it. When you create a mobile version of your site you can redirect mobile device users to this by inserting code into the head code of your main site. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Robert.tilly 12 years ago
|
|
|
Thanks very much <!-- s:-) --><img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":-)" title="Smile" /><!-- s:-) --> Robert |
|
| Post Reply |
| You must login or signup to post. |