css menu въпрос

[bobbydigital]

Колеги, моля помогнете, не мога да разбера в това меню: http://dbushell.github.io/Responsive-Off-C...Menu/step1.html като се скрие за малка резолюция с кой код се показва менюто като се кликне на иконката и с кой код се скрива.

виждам че този код показва бутона за затваряне:

#nav:target .close-btn {
    display: block;
  }

но не мога да вдена как се показва менюто при клик и как се скрива.

 

[alphawow]

От: css menu въпрос

Ами със селектора :target. Бутона за затваряне и отваряне на менюто е линк, които пуска ид параметър в адреса. От там селектора взима ид-то от адреса, което е таргета и пуска цсс кода. В общи лини е това.
Е това е кода, който прави магията.

  #nav:not(:target) {
    z-index: 1;
    height: 0;
  }

 

[stan_bg]

От: css menu въпрос

Магията става посредством комбинация от css3 селектори :target и :not. Навигацията е "скрита" посредством задаване на височина абсолютна нула, и се "показва" съответно със задаване автоматично изчислена от браузъра такава след като не е стилизирана от по-горния селектор.

#nav:not(:target) {
    z-index: 1;
    height: 0;
  }

Виждам, че са ме изпреварили и е вече обяснено.

 

[bobbydigital]

От: css menu въпрос

всъщност колеги с тови код се скрива ако е показано, а мен ме интересува при клик на бутона за показване с кой код с показва.

Това е линка за показване:

<a class="nav-btn" id="nav-open-btn" href="#nav">Book Navigation</a>

С този css като се кликне на горния линк се показва бутона за затваряне но не и самата навигация #nav:

#nav:target .close-btn {
    display: block;
  }

обаче вижте колко е интересно, прави блок само линка за затваряне но не и самото меню #nav

а когато не е таргет или като се кликне на бутона за затваряне го скрива с този код:

#nav:not(:target) {
    z-index: 1;
    height: 0;
  }

абсолютно не мога да разбера как го показват

 

[bobbydigital]

От: css menu въпрос

Вденах го най - накрая. Фактически навигацията винаги е видима, но като влезе в малката резолюция и не е таргет се скрива както правилно сте казали, а като е таргет вече не важи скриването. мале мале...