1

I want to create a menu that looks like this. I want it to look like this when I mouseover:

enter image description here

But the problem is that simple :hover or something similar won't cut it, because that piece is not a square. I mean that I want that red slice to appear when I hover over it's boundary. (not the box that the <div> uses to describe it)

Here is the CSS I use for that red background: 

#miscBTNhover {
    background-image:url(file:///C|/Users/Jankis/Documents/servergaming/img/Untitled-2.gif);
    width:113px;
    height:78px;
    position:absolute;
    left:21px;
    top:0px;
}
Praveen Gowda I V
  • 9,569
  • 4
  • 41
  • 49
Jankauskas Lukas
  • 13
  • 3
  • See some of the answers to a similar question here: http://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map – charles Jun 26 '13 at 19:58
  • 1
    You could do it with canvas. See [this tutorial](http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/), source-atop. Just make the rectangle have a width of the radius, shift it up half the radius, and rotate it 45 degrees using [CSS3 rotate](http://www.w3schools.com/css3/css3_2dtransforms.asp) – Zach Saucier Jun 26 '13 at 19:59

2 Answers2

0

You could try using rotated divs for each menu item.

rotated divs image

jonosma
  • 339
  • 1
  • 4
0

I suggest you to go for some sort of jQuery plugin to make your life easier. There are various jQuery chart plugins which you could use to achieve what you want.

Some good ones:

http://www.jqplot.com/tests/pie-donut-charts.php

https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

If you want to stick to css3 use the following tutorial:

http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/

If you go for the second one just add hover effect, something like this:

#pieSliceRed2 .pie:hover{
  background-color:#1d1d1d;
}

Update

I built a quick and small sample to get you started, I have used FlotCharts plugin (http://www.flotcharts.org/flot/examples/series-pie/index.html)

HTML

<div id="content">
  <div class="demo-container">
   <div id="placeholder" class="demo-placeholder"></div>
  </div>
</div>

CSS

* { padding: 0; margin: 0; vertical-align: top; }

body {
    font: 18px/1.5em "proxima-nova", Helvetica, Arial, sans-serif;
}

a { color: #069; }
a:hover { color: #28b; }

h2 {
    margin-top: 15px;
    font: normal 32px "omnes-pro", Helvetica, Arial, sans-serif;
}

h3 {
    margin-left: 30px;
    font: normal 26px "omnes-pro", Helvetica, Arial, sans-serif;
    color: #666;
}

p {
    margin-top: 10px;
}


#content {
    width: 880px;
    margin: 0 auto;
    padding: 10px;
}


.demo-container {
    width: 850px;
    height: 450px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.pie-link
{
    color:White;
    font-weight:bold;
}
.demo-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

.legend table {
    border-spacing: 5px;
}

jQuery

$(function () {
    var data = [],
    series = 4;

    //for (var i = 0; i < series; i++) {
        data[0] = {
            label: "<a class='pie-link' href='#'>News</a>",
            data: 22
        }

        data[1] = {
            label: "<a class='pie-link' href='#'>Misc</a>",
            data: 22
        }

        data[2] = {
            label: "<a class='pie-link' href='#'>Events</a>",
            data: 22
        }

        data[3] = {
            label: "<a class='pie-link' href='#'>Disclaimer</a>",
            data: 22
        }
    //}

    var placeholder = $("#placeholder");

    placeholder.unbind();

    $.plot(placeholder, data, {
        series: {
            pie: {
                show: true,
                radius: 1/2,
                startAngle: 3 / 4,
                label: {
                    show: true,
                    radius: 1 / 4,
                    formatter: labelFormatter,
                    background: {
                        color: "#1d1d1d"
                    }
                }
            }
        },
        legend: {
            show: false
        },
        grid: {
            hoverable: true,
            clickable: true
        }
    });

    $('.pie-link').click(function (e) {
        alert($(this).html());
    });
});

function labelFormatter(label, series) {
    return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "</div>";
}

Working jsfiddle: http://jsfiddle.net/Y5vSy/1/

You will need to make minor tweaks as you need. But this should get you going.

Learner
  • 3,904
  • 6
  • 29
  • 44