the unordered list is not working..debug plss

Question

1.00/5 (2 votes)

See more:

hello i got some interactive menu from net but on giving the link to the other page it wont change
here is the code

XML

<div class="component">

                <!-- Start Nav Structure -->
                <button class="cn-button" id="cn-button">Menu</button>
                <div class="cn-wrapper" id="cn-wrapper">
                    <ul>
                        <li><a href="Default2.aspx"><span>About</span></a></li>
                        <li><a href="#"><span>Tutorials</span></a></li>
                        <li><a href="#"><span>Articles</span></a></li>
                        <li><a href="next.htm"><span>Snippets</span></a></li>
                        <li><a href="#"><span>Plugins</span></a></li>
                        <li><a href="#"><span>Contact</span></a></li>
                        <li><a href="#"><span>Follow</span></a></li>
                     </ul>
                </div>

and the css is

CSS

* {
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    height: 100%;
}

body {
    background: #52be7f;
    color: #fff;
}

.component {
    position: relative;
    margin-bottom: 3em;
    height: 15em;
    background: rgba(0,0,0,0.05);
    font-family: 'Lato', Arial, sans-serif;
}

.component > h2 {
    position: absolute;
    overflow: hidden;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 300;
    font-style: italic;
    font-size: 12em;
    opacity: 0.1;
    cursor:default;
}

.cn-button {
    position: absolute;
    top: 500px;
    left: 50%;
    z-index: 11;
    margin-top: -2.25em;
    margin-left: -2.25em;
    padding-top: 0em;
    width: 4.5em;
    height: 4.5em;
    border: none;
    border-radius: 50%;
    background: none;
    background-color: #fff;
    color: #52be7f;
    text-align: center;
    font-weight: 700;
    font-size: 1.5em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
}

.csstransforms .cn-wrapper {
    position: absolute;
    top: 480px;
    left: 50%;
    z-index: 10;
    margin-top: -13em;
    margin-left: -13.5em;
    width: 27em;
    height: 27em;
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    -webkit-transition: all .3s ease 0.3s;
    -moz-transition: all .3s ease 0.3s;
    transition: all .3s ease 0.3s;
    -webkit-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -moz-transform: scale(0.1);
    transform: scale(0.1);
    pointer-events: none;
    overflow: hidden;
}

/*cover to prevent extra space of anchors from being clickable*/
.csstransforms .cn-wrapper:after{
  content:".";
  display:block;
  font-size:2em;
  width:6.2em;
  height:6.2em;
  position: absolute;
  left: 50%;
  margin-left: -3.1em;
  top:50%;
  margin-top: -3.1em;
  border-radius: 50%;
  z-index:10;
  color: transparent;
}

.csstransforms .opened-nav {
    border-radius: 50%;
    opacity: 1;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    pointer-events: auto;
    cursor:pointer;
}

.csstransforms .cn-wrapper li {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    margin-top: -1.3em;
    margin-left: -10em;
    width: 10em;
    height: 10em;
    font-size: 1.5em;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: rotate(76deg) skew(60deg);
    -moz-transform: rotate(76deg) skew(60deg);
    -ms-transform: rotate(76deg) skew(60deg);
    transform: rotate(76deg) skew(60deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    pointer-events: none;
}

.csstransforms .cn-wrapper li a {
    position: absolute;
    position: fixed; /* fix the displacement bug in webkit browsers when using tab key */
    right: -7.25em;
    bottom: -7.25em;
    display: block;
    width: 14.5em;
    height: 14.5em;
    border-radius: 50%;
    background: #429a67;
    background: -webkit-radial-gradient(transparent 35%, #429a67 35%);
    background: -moz-radial-gradient(transparent 35%, #429a67 35%);
    background: radial-gradient(transparent 35%, #429a67 35%);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 1.2em;
    line-height: 2;
    -webkit-transform: skew(-60deg) rotate(-75deg) scale(1);
    -moz-transform: skew(-60deg) rotate(-75deg) scale(1);
    -ms-transform: skew(-60deg) rotate(-75deg) scale(1);
    transform: skew(-60deg) rotate(-75deg) scale(1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events:auto;
}

.csstransforms .cn-wrapper li a span {
    position: relative;
    top: 1.8em;
    display: block;
    font-size: .5em;
    font-weight: 700;
    text-transform: uppercase;
}

.csstransforms .cn-wrapper li a:hover,
.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
    background: -webkit-radial-gradient(transparent 35%, #449e6a 35%);
    background: -moz-radial-gradient(transparent 35%, #449e6a 35%);
    background: radial-gradient(transparent 35%, #449e6a 35%);
}

.csstransforms .opened-nav li {
    -webkit-transition: all .3s ease .3s;
    -moz-transition: all .3s ease .3s;
    transition: all .3s ease .3s;
}

.csstransforms .opened-nav li:first-child {
    -webkit-transform: rotate(-20deg) skew(60deg);
    -moz-transform: rotate(-20deg) skew(60deg);
    -ms-transform: rotate(-20deg) skew(60deg);
    transform: rotate(-20deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(2) {
    -webkit-transform: rotate(12deg) skew(60deg);
    -moz-transform: rotate(12deg) skew(60deg);
    -ms-transform: rotate(12deg) skew(60deg);
    transform: rotate(12deg) skew(60deg);
}

.csstransforms .opened-nav  li:nth-child(3) {
    -webkit-transform: rotate(44deg) skew(60deg);
    -moz-transform: rotate(44deg) skew(60deg);
    -ms-transform: rotate(44deg) skew(60deg);
    transform: rotate(44deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(4) {
    -webkit-transform: rotate(76deg) skew(60deg);
    -moz-transform: rotate(76deg) skew(60deg);
    -ms-transform: rotate(76deg) skew(60deg);
    transform: rotate(76deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(5) {
    -webkit-transform: rotate(108deg) skew(60deg);
    -moz-transform: rotate(108deg) skew(60deg);
    -ms-transform: rotate(108deg) skew(60deg);
    transform: rotate(108deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(6) {
    -webkit-transform: rotate(140deg) skew(60deg);
    -moz-transform: rotate(140deg) skew(60deg);
    -ms-transform: rotate(140deg) skew(60deg);
    transform: rotate(140deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(7) {
    -webkit-transform: rotate(172deg) skew(60deg);
    -moz-transform: rotate(172deg) skew(60deg);
    -ms-transform: rotate(172deg) skew(60deg);
    transform: rotate(172deg) skew(60deg);
}

.no-csstransforms .cn-wrapper {
    overflow: hidden;
    margin: 10em auto;
    padding: .5em;
    text-align: center;
}

.no-csstransforms .cn-wrapper ul {
    display: inline-block;
}

.no-csstransforms .cn-wrapper li {
    float: left;
    width: 5em;
    height: 5em;
    background-color: #fff;
    text-align: center;
    font-size: 1em;
    line-height: 5em;
}

.no-csstransforms .cn-wrapper li a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
    background-color: #f8f8f8;
}

.no-csstransforms .cn-wrapper li.active a{
    background-color: #6F325C;
    color: #fff;
}

.no-csstransforms .cn-button {
    display: none;
}

@media only screen and (max-width: 620px) {
    .no-csstransforms li {
        width: 4em;
        height: 4em;
        line-height: 4em;
    }
}

@media only screen and (max-width: 500px) {
    .no-ccstransforms .cn-wrapper {
        padding: .5em;
    }

    .no-csstransforms .cn-wrapper li {
        width: 4em;
        height: 4em;
        font-size: .9em;
        line-height: 4em;
    }
}

@media only screen and (max-width: 480px) {
    .csstransforms .cn-wrapper {
        font-size: .68em;
    }

    .cn-button {
        font-size: 1em;
    }
}

@media only screen and (max-width:420px) {
    .no-csstransforms .cn-wrapper li {
        width: 100%;
        height: 3em;
        line-height: 3em;
    }
}

but if i want to move from one page to another through navigation menu it wont work.like i tried

Posted 7-Dec-13 7:28am

Karn Singh

Add a Solution

Comments

Karn Singh 7-Dec-13 13:30pm

<li><span>About</span></li> on clicking this on browser the page default.aspx wont load

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Accepted Answer · 2013-12-07T10:16:00

So, let me see if I understand this properly:
You have found some random code on the internet, you can't get it to work, you don't understand it, and you don't know how to fix it.
So, you've found a different random site on the internet, dumped the non working code here and expect us to look at it, understand it, work out what it is supposed to do and why it doesn't do whatever it is you expect it to do, and fix it for you.

Did you ever consider that the best person to explain the code to you, and tell you what you have done wrong might just be the person who actually wrote it?

So, go back to where you go the code from, and ask there.