Link to home
Start Free TrialLog in
Avatar of weikelbob
weikelbobFlag for United States of America

asked on

Pure CSS popout image menu - want the most beautiful style.

Hello,

How do I make a pure CSS menu that pops out with image buttons like this:

www.northshorecare.com (site down right now but will be up soon)

but mine will be better, better graphics, better layout, better colors, hopefully fast.

Just looking for the code for the most beautiful way to do this or links.

Will go on this left side menu and stick out to the right - Location will be on the left of this site: www.ouradultdiapers.com

no javascript is allowed on that site (it's a premade shopping cart). If there's no way to do it without javascript, then help me with javascript and I'll see what I can do. But pure CSS is ideal.

Mobile friendly please for various desktop sizes (the mobile menu will remain the same).

Thanks.
ASKER CERTIFIED SOLUTION
Avatar of Steve Bink
Steve Bink
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of weikelbob

ASKER

I can't find any in those links that slide right into an image menu. Can you be more specific on which one to choose and how to modify it so that it has images instead of text buttons. You don't have to be detailed, just point me in the right direction and I'll get started.

Thanks.
I can't be more specific because I don't know what you're definition of "most beautiful" entails.  Whichever menu you pick, chances are you're going to have some modifications to complete before it comes near what you actually want/need.  My best recommendation is to start with whichever menu looks closest to what you want, then start modifying it to add your particular features.  If you get stuck, come back with your code and specifics about the obstacle you encountered.
OK, I'll give it a shot. Is it hard to add clickable images? None of the pop to the right menus have any image buttons.
Once you find a menu, strip it down to the basic structure.  From there, you add whatever content you want to the individual menu items.
greetings weikelbob , , I can understand that you want good looking fixed  position "image buttons" for the "MENU" thing, BUT this is an IMAGE thing, not so much a menu CSS design thing. Also you will need COLORS to match your web pages, this is also a customization, not so much a design thing, at least to me it is.

Here is some simple slide out menu CSS HTML, on right side FIXED position, and slide out menu -

the HTML -
<img id="mbf" src="images/menuBut.gif" />
<div id="mend">
<a href="google.com">ABOUT</a>
<a href="google.com">PRODUCTS</a>
<a href="google.com">ORDERS</a>
<a href="google.com">SIZING</a>
<a href="google.com">RETURNS</a>
<a href="google.com">CONTACT</a>
</div>

Open in new window


the CSS -
#mbf {
position: fixed;
left: 2px;
top: 17px;
cursor: pointer;
}

#mend {
position: fixed;
left: -6.6em;
top: 107px;
text-align: center;
/*background: #fdd;*/
border: 2px solid #caa;
border-radius: 10px;
-webkit-transition: left 0.9s;
transition: left 0.9s;
}

#mend a {
display: block;
background: #ed9;
margin: 3px 2px;
padding: 1px 4px;
border-radius: 10px;
}

Open in new window


AND the javascript -
document.getElementById("mend").onclick = 
  document.getElementById("mbf").onclick = function() {
  var mend = document.getElementById("mend");
  if (mend.style.left == "2px") mend.style.left = "-6.6em"; else mend.style.left = "2px";
}

Open in new window


I used javascript in this, BECAUSE, if I used the CSS with hidden check boxes or the Tab Index selector, then your requirement of the IMAGE makes it complicated and less robust, so I just used javascript

this is the menu image -
User generated image
Thanks Slick812. I'll modify a pure CSS slide-out menu then. That's what I needed to know.