How to make this simple button menu work on all platforms

HTML & CSS
1

I have been experimenting with a menu to replace another which is functional, pretty but does take a lot of CSS script.

My goal is to make it

  • work on all platforms
  • more mobile friendly
  • reduce the current CSS script to a minimum
  • eliminate all Javascript.

Here is my attempt so far that works fine on my desktop, Android tablets and mobiles.

http://www.johns-jokes.com/downloads/sp-d/jb-button-menus/

I would be grateful for your feedback regarding other platforms and if both the RED and BLUE buttons do what they are supposed to do!

If you have any suggestions for improvement then I will post your versions.

<?php 
  $title  = 'Button Menus';
  $spPost = 'http://www.sitepoint.com/community/t/how-to-make-this-simple-button-menu-work-on-all-platforms/114363';

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> 
<style type="text/css">
.btns                {position:fixed; left: -2em;  width:6.4em; height:4.2em; 
                      background-color:transparent; 
                      background-color:#eef; 
                      overflow:hidden; line-height:4em; text-align:center;}
.btns a              {display:inline-block; float:left; width:4em; height:4em;
                      margin:0 0 1em 2em; padding: 0 0.2em; text-decoration: none;
                      border-radius:4em; background-color:#000;}
.btns a:first-letter {font-size:1.1em; font-weight:700;} 

.red         {top:0.6em;}
.red:hover   {width:40em;} 
.red:after   {content: ":hover";}
.red a       {background-color:#f00; color: #00f; font-style:italic;;}
.red a:hover {background-color:#fff; color:#000; text-decoration: underline; }

.blue         {top:6.6em;}
.blue:active  {width:40em;} 
.blue:after   {content: ":active";}
.blue a       {background-color:#00f; color: #0ff; font-style:italic;;}
.blue a:hover {background-color:#fff; color:#000; text-decoration: underline; }

.green     {top:12.6em;}
.green a   {background-color:#0f0; color: #000; font-style:italic;;}

body       {font-size:0.88em;}
.container {margin:0 4em 2em; background-color:#eee}
.sitepoint {float:right; margin:0; padding:0;}
#source    {margin:1em 1.2em; padding:1em;  color;#333; border-radius: 0.42em;}
.clb       {clear:both;} 
</style>
<title> <?=$title;?> </title>
</head>
<body>

<div class="btns red" title=":hover">
  <a href="#">Menu</a>
  <a href="#">Home</a>
  <a href="#">Author</a>
  <a href="#">Blogs</a>
  <a href="#">Novels</a>
</div>

<div class="btns blue" title=":active">
  <a href="#">Menu</a>
  <a href="#">Home</a>
  <a href="#">Author</a>
  <a href="#">Blogs</a>
  <a href="#">Novels</a>
</div>

<div class="btns green" title=" Suggestions ">
  <a href="#">Your</a>
</div>

<div class="container">
  <h4 class="sitepoint">
      <a href="<?=$spPost;?>"> SitePoint Forum: </a> 
      <p>
      <a href="index.php"> Home </a> 
      </p>
  </h4>    

  <h1 style="text-align:center;"> <?=$title;?> </h1>
  <hr class="clb" />

  <div id='source'>
    <b>Source code: </b>
    <br /><br />
    <?php highlight_file(__FILE__);?>
  </div>
</div>

</body>
</html>
2

I assume your only issue with the blue?

The blue isn’t working on click properly because you are actually needing to put the :focus pseudo class onto it.

Are you more or less trying to get this blue CSS dropdown to perform on click? Your code will need a bit of work but I’ll await your response so I don’t waste any of my time :slight_smile: .

3

Hi Ryan, many thanks for taking the time to try the code.

I just tried the blue button on the Android tablet and discovered it does not work but it does work on the desktop. I would like the blue button to work on the Android tablet.

May I ask what platform you are using to test the code?

4

It works on desktop for you? I just tried it on google chrome (WIN7) and it does not work.

And you are just going for CSS clickable menu right? Nothing fancy?

As far as testing I was just using Chrome/Win7. Though I have a free browserstack.com account via my work so I use that for x-browser testing.

5

LinuxMint 17.1 desktop - Red button: Firefox, Google and Opera work.

LinuxMint 17.1 desktop - Blue button: Firefox ok
LinuxMint 17.1 desktop - Blue button: Google Chrome and Opera do not work.

Nexus 7 Chrome - Red button ok
Nexus 7 Chrome - Blue button do not work

@RyanReese, does the Red button work on Chrome/Win 7?

Is it safe to use the Red button, without any modifications on my website?

6

If you are asking whether ti will break any - I think it will be safe.

It’s certainly not the standard way of doing dropdowns though (I assume you realize this?)

Not saying your way is bad or anything. The hover works and there doesn’t appear to be any issues (I’d double check mobile devices since they seem to have issues with hover menus though.)

7

Also the active menu only works as long as your mouse click is down (as of this moment.) It does not function as a true clickable CSS dropdown menu.

8

I already have a menu (with bloated CSS) which uses a “Hamburger” to display the menu then another click is necessary to make a selection.

I know using the RED button is “not the standard way of doing dropdowns” but neither is any new feature. It is very effective and intuitive on mobile systems with limited real-estate.

The Red button hover works fine on the Nexus 7 tablet and the Moto G mobile.

I am curious to know if the RED button works ok on IOS platforms and other mobile platforms.

9

Give me 30 minutes and I’ll test all the different devices in browserstack. I have a thingy I need to go to which will take a few minutes.

1 Like
10

Red Menu
IOS - iPhone(all versions). The menu can be touched open but does not close. As said before this is due to mobiles not liking “hover”.

I’m actually just going to stop there since this alone is reason enough to not use this menu everywhere. If you have the hamburger menu then yes go for it.

1 Like
11

Of course - I didn’t mean to be rude hwen I said it - only felt like you should know. I assumed you did though.

1 Like
12

Many thanks for the results.

It is now quite late so I will sleep on it and try to think of a simple solution to the IOS “does not close” problem.

13

Generally you will want to stay with click menus on mobile devices (that’s why hamburger is so great and widely used.) Do let me know if you find anything pertaining to your problems though. Always love learning :slight_smile: .

I’m not sure whether you are going for innovative and brand-new but here is a CSS only clickable menu example that’s quite nice - http://jsfiddle.net/Cerebrl/uhykY/ . Has a kink or two but generally it’s good.

Good luck with your endeavors.

1 Like
14

Please supply further details of your browserstack or a free online IOS testing application. (I did search and the results all seem to require a payment).

15

I noticed that :hover is used - does that work OK in IOS?

off topic
I prefer the horizontal hover method because I find it has less clicks and easier to read left to right rather than the Chinese top to bottom :slight_smile:

16

No that menu doesn’t work in the iphone either.

Here’s one that does :slight_smile:

17

Excellent Paul and thank you for the Codepen Demo. It may have taken me months to get that to work and maybe never!

I have uploaded your source code to my menu system and made some small changes with Version:005

As an exercise I will try and make the buttons vertical similar to Version: 003. I may be back to ask for some more advice :smile:

Many thanks once again,

18

I get it free via my work.

Generally not on mobile devices or tablets. Not just iOS though I believe.

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.