javascript - menu wont show or work -

-

my menu on page not work, not @ visible. set on codepen works fine when have tried implement it, failed work. it? still new coding appreciate help.

html:

<body> <nav class="menu-opener">   <div class="menu-opener-inner"></div> </nav> <nav class="menu">   <ul class="menu-inner">     <a href="#" class="menu-link">       <li>home.</li>     </a>     <a href="#" class="menu-link">       <li>portfolio.</li>     </a>     <a href="#" class="menu-link">       <li>about.</li>     </a>     <a href="#" class="menu-link">       <li>contact.</li>     </a>   </ul> </nav> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript"> $(".menu-opener").click(function(){   $(".menu-opener, .menu-opener-inner, .menu").toggleclass("active"); }); </script> <div class="hero1"> <div id="hero1title"><h1>simplicity, craft , format <br>is excites me designer</h1></div> </div> </body>

css:

html,body {     padding:0;     margin:0;     height:100% }  body {     overflow:hidden }  /*--homepage*/  p.footertext {     position:absolute;     left:20px;     bottom:10px;     font-size:12px;     z-index:1 }  @media screen , (max-width : 400px) { p.footertext {     display:none } } .hero1{     position: absolute;     top: 0;     left: 0;     width: 100%;     height:100%;     background-color: rgb(247,200,198); } div #hero1title h1{     color: white;     font-size: 90pt;     position: absolute;     width: 100%;     height: 100%;     top: 30%;     text-align: center; }  /* menu styling*/    %transition {   transition: 250ms all; }  .menu-opener {   background: none;   cursor: pointer;   height: 4rem;   margin: 1rem;   position: absolute;   user-select: none;   width: 4rem; } .menu-opener-inner {   background: white;   height: .5rem;   margin-left: .75rem;   margin-top: 1.75rem;   width: 2.5rem;   @extend %transition;   &::before, &::after {     background: white;     content: '';     display: block;     height: 8px;     width: 2.5rem;     @extend %transition;   }   &::before {     transform: translatey(-.75rem);   }   &::after {     transform: translatey(.25rem);   }   &.active {     background: transparent;     &::before {       transform: translatey(0rem) rotate(-45deg);     }     &::after {       transform: translatey(-.5rem) translatex(-0rem) rotate(45deg)     }   } } .menu {   background: rgb(152, 211, 189);   height: 100%;   position: absolute;   top: 0px;   user-select: none;   width: 0rem;   z-index: -1;   @extend %transition;   &.active {     width: 100%;     @extend %transition;     & .menu-link {       color: white;     }   } } .menu-inner {   display: block;   flex-direction: row;   height: 450px;   list-style-type: none;   margin-top: 15%;   padding: 0; } .menu-link {   color: transparent;   display: flex;   flex: 1 1 auto;   font-size: 70px;   font-family: 'calibre-semibold';   height: 25%;   text-align: center;   text-decoration: none;   li {     margin: auto;   } }

i dropped fiddle, , find following things:

  1. the z-index shouldn't -1
  2. it's there. need highlight see it.
  3. the text styled horribly, doesn't great.
  4. your text color in menu-list set "transparent".
  5. your hrefs should inside "li" not outside.

Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more