Viewing Mobile navigation bar

Mobile navigation bar



User: Christopher 9 years ago
Creating redirect mobile pages is turning out to be trickier than I thought. I wish there was more info on this. The video tutorials re: mobile sites is VERY limited. Obviously, I can't use the same navigation bar since it was designed for desktop. So if my main page titled "Introduction" has 'Include Page in Navigation Menu' selected, my redirect page titled "Introduction-M" must leave that deselected, right? Otherwise, they'll both be added to the Nav bar? Does this mean I have to recreate a Mobile Navigation system using HTML ala Roddy's Everweb codebox page instructions here? Why doesn't EverWeb offer a solution? Is one coming?

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Paul-RAGESW 9 years ago
We're working on a better mobile navigation system for a future version. Sorry I don't have specific right now.

In the meantime you can create your own mobile navigation system using text boxes and links.

-------------------------------
Paul
EverWeb Developer
User: Roddy 9 years ago
Mobile navigation is a subject in its own right and needs careful consideration. I have developed several widgets for this in response to user requests. They are included in the new section of EverWeb Codebox which is about using HTML5 layout widgets for superior SEO and ease of designing cleaner page layouts…

http://everwebcodebox.com/html5/navigation/navigation-widgets.html

Consider whether you really need to have the navigation on every page of the smart phone version of your website or if a home button - in combo with a back to the top button on every page - will do to save space. Another option is to have the navigation only on the Home page and a breadcrumb trail on all the others.

Mobile navigation needs to be click - not hover - to be completely functional and the recommended minimum for navigation button size is 30 px x 30 px. This means that you should also never use text hyperlinks on a mobile site unless you add padding to increase their height . Modern web design - especially for mobiles - makes use of CTA's rather than text links. These should preferably be created using CSS rather than images. The button widget and the mobile buttons widgets are examples of this.

Last edit 9 years ago

-------------------------------
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: Christopher 9 years ago
Roddy, I can't thank you enough for your everwebcodebox site. I have a question about the Mobile Popup Navigation. There doesn't seem to be a way to exit this without clicking on a link. Shouldn't the user be able to click outside the navigation area for it to disappear?

You can test using a smartphone by going to: m.cleetche.com. Or clicking here.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 9 years ago
Some people think that when you open a menu you actually want to go somewhere and there's no need to close it.

However, I did improve the design to make it click to open and close when I made the widget...

http://everwebcodebox.com/html5/navigation/icon-nav.html

I could swear on my favorite teddy bear's life that I updated the one on the Codebox site and made the JS file available for download. I think the answer may be that I didn't get around to publishing the update. I'll check that out when I get back to my computer and let you know.

-------------------------------
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 9 years ago
@Cristopher
I have just completely re written the code for the icon navigation so that it opens and closes on clicking the icon…

http://everwebcodebox.com/mobile/pop-up-nav.html

Note that the HTML has changed too but you can still use your existing list items.

There's a download link for the required java script.

I have also improved the Mega Menu so that it will close when clicking off it when viewed on an iPad.

As a work in progress, I have two responsive navigations that could be used on both versions of the site. One is a drop down and the other is a vertical nav with flyout sub nav. Both change to an icon style nav on mobile devices.

-------------------------------
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: Christopher 9 years ago
Nice work. Not to be a pain, but I'm not crazy about the animation. Is there an easy for me to tweak it so it just opens and closes?

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Christopher 9 years ago
Roddy, I just got around to implementing the new popup click nav. I can't figure out how to centre or lower the drop down though. If I change the top or left metrics, it crops from the right edge. Here's a link.

Edit: I've been mucking with a bit of the CSS for styling. I hope it didn't mess anything important up.

Last edit 9 years ago

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 9 years ago
Here are the relevant sections in the CSS. Note the removal of "overflow:hidden"...

#clickNav {width:250px; height:auto;margin:0;padding:0;overflow:hidden} /* delete overflow:hidden*/
#clickNav ul{list-style:none;width:96%;margin:0;padding:0;background:#000;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;position:relative;
top:5px; /*Increase value to move down */
left:2px; /*Increase value to move right */
}

You should take the time to remove the comments before publishing - unless you are using an optimiser which does it for you.

-------------------------------
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 9 years ago
I should have mentioned that smart phone websites usually have a full width menu. The widget that creates the menu that you are trying to implement allows the user to drag it out across the page.

I have created a two level version of this navigation that can be used on a wider tablet type page at whatever width and then stretched full width on the smart phone version. You can get the idea by looking at this flexbox style demo page and dragging the browser width down to phone size.

Last edit 9 years ago

-------------------------------
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: Christopher 9 years ago
One more question. How do I make the icon Helvetica instead of Verdana on my iPhone? What I've done isn't working. The hamburger is too vertical looking.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 9 years ago
Do you mean that you want the icon bars closer together?

-------------------------------
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: Christopher 9 years ago
Yes. Looks fine on desktop but stretched vertically on iOS. I think that's the difference between Helvetica vs Verdana, no?

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 9 years ago
The icon is created by the browser. If you want to take control of the design of it, you need to create the icon using CSS pseudo classes.
I'm away from my computer at the moment but I will email you some code tomorrow. Can you wait that long?

-------------------------------
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: Christopher 9 years ago
Yep. No rush. It's not really a big deal either. But with the previous code, I just inserted the following between the >≡<. This is different from this: ☰. But I think if I can just change the font it should work. It seems stuck on Verdana.

-------------------------------
rMBP 15&quot;, 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27&quot; Thunderbolt Cinema Display

www.cleetche.com


Post Reply
You must login or signup to post.