Разработка веб-сайта переднего плана

Question

Я хочу сделать кнопку в верхнем правом углу и то, что она показала после щелчка по ней на сайте codepen.io. Кто-то может исправить мой код и указать ошибки?

$(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> 

Answer 1

Посмотрите на моем примере. все, что вам нужно сделать, это иметь правильную CSS и переключить открытый класс: 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>