CODEWITHSUNDEEP
jqueryhtmlcss
Ashwin Parmar
Ashwin Parmar

Reputation: 3045

How to create Menu in HTML5 and CSS3 like Circles?

I am confused that how can i create the menu like circles and sub-circles in HTML5/CSS3?

Explanation:

<ul>
    <li>Circle-1
        <ul>
            <li>Circle-1.1</li>
            <li>Circle-1.2</li>
            <li>Circle-1.3</li>
            <li>Circle-1.4</li>
        </ul>
    </li>
    <li>Circle-2
        <ul>
            <li>Circle-2.1</li>
            <li>Circle-2.2</li>
            <li>Circle-2.3</li>
            <li>Circle-2.4</li>
        </ul>
    </li>
    <li>Circle-3</li>
    <li>Circle-4</li>
</ul>

This is my hierarchy of Parent Circle and Child Circle.

I would like to Create Menu something like When I click on Each Circle It should be show other sub-menu options as a Connected Circles.

Example 1 enter image description here

Can anyone give me suggetion how to achieve this functionality or is there any Javascript API available to achieve same as Example 1

Upvotes: 1

Views: 1977

Answers (2)

melc
melc

Reputation: 11671

I have created a similar implementation in the past using jquery, you might find it useful. It can be used as a jquery plugin,

jQuery(document).ready(function () {
    jQuery('.menu').roundMenu({
        /*
        menuSize: "50px",
        optionSize: "30px",
        distance: "70px",
        span: "180",
        offset: "0",
        isMenuRound: true,
        isOptionsRound: true,
        animate:true,
        onShow:function(i){alert("showed :"+i);},
        onHide:function(i){alert("hidden :"+i);}*/

    });

there is also a fiddle about it, http://jsfiddle.net/melc/Qv6Y6/

also tested it with sub menus and it works (fiddle - http://jsfiddle.net/rX8fJ/)

unfortunately not much documenation but try to spot the way it is being used, it has some props

Upvotes: 5

Davor Mlinaric
Davor Mlinaric

Reputation: 2017

example how to create a circle in fiddle: http://jsfiddle.net/BQKSc/

CSS

div {
    width: 10em;
    height: 10em;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    border:5px solid red;
}
p {
    text-align: center;
    margin-top: 4.5em;
}

HTML

<div><p>CIRCLE</p></div>

Upvotes: 1

Related Questions