javascript - CSS transition inline menu -

-

i need inline menu transition.

i tried recode example requirement, have problem a:hover class - maybe problem in js class.

but have no idea how red background under main link (dropdbtn class) while scrolling submenu.

$(document).ready(function() {    console.log("ready!");    $(".dropdown-content").mouseenter(function() {      $(this).prev().addclass('href-hovered');    })      $(".dropdown-content").mouseleave(function() {      $(this).prev().removeclass('href-hovered');    })  });
.nav {    width: 1200px !important;    height: 50px;    padding-bottom: 20px;    list-style: none;    margin: 0;    padding: 0;  }  .nav ul {    margin: 0;    padding: 0;    list-style: none;    display: table;  }  .nav a.dropbtn {    display: block;    line-height: 1.5em;    color: #bcf1f3;    font-family: 'webfont';    font-size: 1.5em;    width: 170px;  }  .nav a.dropbtn:hover {    display: block;    //padding:20px 40px;    line-height: 1.5em;    color: #bcf1f3;    font-family: 'webfont';    font-size: 1.5em;    width: 170px;    background: red;  }  .nav ul:before,  .nav ul:after {    content: "";    display: table;  }  .nav ul:after {    clear: both;  }  .dropdown {    float: left;    background: white;    position: relative;    width: 170px;    min-height: 50px;  }  .dropdown > {    color: black;    display: block;    padding: 12px 24px;    text-decoration: none;  }  .dropdown > a:hover {    color: black;    background: red;    display: block;    padding: 12px 24px;    text-decoration: none;  }  .dropdown .dropdown-content {    position: absolute;    transform: translate3d(0, -100%, 0);    transition: transform .2s ease-in;    z-index: -1;    left: 0;  }  .dropdown:hover .dropdown-content {    transform: translate3d(0, 0, 0);    transition-duration: .4s;    transition-timing-function: ease-out;    z-index: 1;  }  .dropdown-content {    background: red;    list-style: none;    width: 170px;    white-space: nowrap;  }  .dropdown-content {    display: block;    padding: 12px 24px;    color: #fff;    text-decoration: none;    z-index: 100 !important;  }  .nav .red {    color: #ff6600;    font-family: 'webfont';    font: 1.8em;  }  .nav .green {    color: #00cccc;    font-family: 'webfont';  }  .nav a:hover .red {    color: white;    padding-top: 20px;    font-family: 'webfont';  }  .nav a:hover .green {    color: white;    font-family: 'webfont';  }  .nav a.dropbtn.href-hovered .green {    color: white;    font-family: 'webfont';    background: red;    width: 170px;    height: 50px;  }  .nav a.dropbtn.href-hovered .red {    color: white;    padding-top: 20px;    z-index: 2;    font-family: 'webfont';    background: red;    width: 170px;    height: 50px;  }  .nav a:hover .red,  a:hover .green {    color: white;    font-family: 'webfont';  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <nav class="nav">      <ul>      <li class='dropdown'><a class="dropbtn" href="#"><span class="red">nav</span><br><span class="green">1</span></a>         <ul class="dropdown-content">          <li><a href="http://localhost/?page_id=19">sub_nav</a>           </li>          <li><a href="http://localhost/?page_id=304">sub_nav</a>           </li>          <li><a href="http://localhost/?page_id=340">sub_nav</a>           </li>          <li><a href="http://localhost/?page_id=306">sub_nav</a>           </li>          <li><a href="http://localhost/?page_id=60">sub_nav</a>           </li>        </ul>      </li>      </ul>    <nav>

as mihailo said, menu kind of chaotic , overly complex. achieve requirement, change style definition

nav a.dropbtn:hover

to

nav:hover a.dropbtn

to have rule applied when nav block hovered.


Comments

Post a Comment

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

-
i have password protected page on frontend. on page, want display full list of purchases associated single woocommerce product id. option 1: i've looked through woocommerce docs , , found: wc_cli_order , list_( $args, $assoc_args ) function lists orders. presumably, orders can filtered product id [--=] filter orders based on order property. line item fields (numeric array, started index zero): line_items.0.product_id option 2: i found article , based on customer id. i've modified code based on guesses meta_key , meta_value. $customer_orders = get_posts( array( 'numberposts' => -1, 'meta_key' => '_product', 'meta_value' => get_product_id(), 'post_type' => wc_get_order_types(), 'post_status' => array_keys( wc_get_order_statuses() ), ) ); how display orders single product showing recent order first? here solution put based on these articles: http://www.w...
Read more

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

-
i'm having difficult time , hope guys can help. using helicon isapi rewrite version 3.1.0.104 on our iis server. edit http.conf file , have tried , still fail. this trying do: redirect url: https://www.domain.com/switch-by-version?version=2.8.5.2594 to: https://test.domain.com/load/load.aspx?tver=2.8.5.2594 the version number @ end source url change, , need target url have same version number @ end of url example above shows. i tried following not work: rewritecond %{query_string} ^version=(\d\d?)\.(\d\d?)\.(\d\d?)\.(.*)$ [nc] rewriterule ^/switch-by-version(.*)$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l] any appreciated! thanks. if it's running in equivalent context of .htaccess , rule shouldn't start / . here's simpler version: rewritecond %{query_string} ^version=(\d+\.\d+\.\d+(?:\..+)?)$ [nc] rewriterule ^switch-by-version/?$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l]
Read more

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -

-
https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps following tutorials, try write authentication restrict admin panel, didn't understood how can that. this admin panel, admin panel don't want show , request database unauthenticated users. my laravel-routes route::get('/admin',function(){ return view('index'); }); route::get('/api/v1/employees/{id?}', 'employees@index'); route::get('/api/v1/users/{id?}', 'employees@users'); route::post('/api/v1/employees', 'employees@store'); route::post('/api/v1/employees/{id}', 'employees@update'); route::delete('/api/v1/employees/{id}', 'employees@destroy'); route::group(['prefix' => 'api'], function() { route::resource('authenticate', 'authenticatecontroller', ['only' => ['index']]); route::post('authenticate', 'authentic...
Read more