weikelbob
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
ASKER
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 -
the CSS -
AND the javascript -
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 -
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>
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;
}
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";
}
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 -
ASKER
Thanks Slick812. I'll modify a pure CSS slide-out menu then. That's what I needed to know.
ASKER
Thanks.