Front end web development

Question

I want to make the button in top right and what it showed after click on it at the corrner of codepen.io site. Someone can fix my code and indicate the errors ?

$(document).ready(function(){
        $(".nut").click(function(){     
           $(".choose").toggle(200);
        });
    });

@import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);

html, body{

    font-family: 'Open Sans', sans-serif;
}
#container{
     background-color: #0d0d0d; 
}
.nut{
    position: absolute;
    top: 10px;
    right: 10px;
}
.nut a img{
    border-radius: 3px;
    cursor: pointer;
    height: 44px;
}
.choose{
    border: 1px solid black;
    width: 200px;
    height: 350px;
    position: absolute;
    top: 64px;
    right: 0;
    display: hidden;
}
.choose ul{ 
    padding: 0px;
    list-style-type: none;
}
.choose .one li{    
    cursor: pointer;
    position: ralative;
    padding: 8px 15px 10px; 
}
.choose .one li a{  
    font-size: 15px;
}
.choose .one li:nth-child(7){   
    border-bottom: 1px solid black;
    margin-bottom: 3px;
}
.choose .one li:hover{
    background-color: #e6e6e6;
}
.choose .two li{
    padding: 0 ;
    display: inline;
    opacity: .5;
}
.choose .two ul li{
    font-size: 7px;
}
.choose .two li:hover{
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="nut">
        <a><img src="//gravatar.com/avatar/7630787fd05d0b926f921213710bb074?s=80">
        </a>
    </div>
    <div class="choose">
        <ul class="one">
            <li><a>New Pen</a></li>
            <li><a>New Post</a></li>
            <li><a>Recent Activity</a></li>
            <li><a>Embed Theme Builder</a></li>
            <li><a>Settings</a></li>
            <li><a>Help</a></li>
            <li><a>Log Out</a></li>     
            <li><a>Your Profile</a></li>
            <li>
                <ul class="two">
                    <li><a>Pens</a></li>
                    <li><a>Posts</a></li>
                    <li><a>Collections</a></li>
                </ul>
            <li>
        </ul>
    </div>

Ilanus Ilanus · Accepted Answer · 2015-11-30T08:35:31

Have a look at my example. all you need to do is have the proper CSS and toggle the open class: JSFiddle

$(document).ready(function(){
        $(".user-stuff").click(function(){     
          $('.user-dropdown').toggleClass('open');
        });
    });

@import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);
a {
    font-family: 'Lato';
}

.user-dropdown {
    background: white;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    position: absolute;
    top: 100%;
    padding: 5px 0;
    width: 200px;
    color: #222;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: -webkit-transform 0.15s, opacity 0.15s;
    transition: transform 0.15s, opacity 0.15s;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right
}
.open.user-dropdown {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}
#mini-personal-avatar {
    border-radius: 2px;
    cursor: pointer
}
.link-list,
.link-list ul,
.link-list ol {
    list-style: none
}
.link-list a {
    color: black;
    display: block;
    padding: 8px 15px 10px;
    line-height: 1.1;
    text-shadow: none;
    text-decoration: none
}
.link-list a:hover,
.link-list a:focus {
    color: inherit;
    background: #E7E7E7
}
.link-list a.active {
    background: #ccc
}
.link-list a.active .view-meta {
    color: #666
}
.user-dropdown {
    top: 45px;
    left: 0 !important;
    right: 0;
}
.user-dropdown>li {
    position: relative
}
.user-dropdown>li.sep-after {
    border-bottom: 1px solid #666;
    padding-bottom: 5px
}
.user-dropdown>li.sep-after+li {
    padding-top: 5px
}
.user-dropdown .context-switcher {
    position: relative;
    padding: 0 !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user-stuff header-chunk">

    <img id="mini-personal-avatar" src="//gravatar.com/avatar/b10c8837fdebfca4078b6bad5217c2de?s=80" width="44" height="44" class="user-avatar" alt="User Gravatar" data-dropdown="#user-dropdown">

</div>

<ul class="user-dropdown link-list is-dropdown" id="user-dropdown">

    <li class="dropdown-newpen">
        <a href="/pen/">
      New Pen
    </a>
    </li>

    <li class="dropdown-newpost">
        <a href="/write/">
      New Post
    </a>
    </li>

    <li class="dropdown-activity">
        <a href="/ilanus/activity/">
      Recent Activity
    </a>
    </li>

    <li class="dropdown-embedbuilder">
        <a href="/ilanus/embed/builder/public/">
      Embed Theme Builder
    </a>
    </li>


    <li class="dropdown-yoursettings">
        <a href="/ilanus/settings/editor/">
      Settings
    </a>
    </li>

    <li class="dropdown-help">
        <a href="http://blog.codepen.io/documentation/">
      Help
    </a>
    </li>

    <li class="dropdown-logout sep-after">
        <a href="/login/logout" id="logout">
      Log Out
</a> </li>

</ul>

Front end web development

1 Answers