Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ CSS _ input w hamburgerze nie działa

Napisany przez: frankiejojo 9.06.2019, 17:44:57

Cześć,
Napisałem "hamburger menu" i działa. Jednak "wysuwać" ma się wyszukiwarka a jak wiadomo wyszukiwarka to formularz, który składa się min z input text. I tu jest problem bo nie wdzę input text i nie wiem dlaczego

Kod:

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/style.html>
  2. a
  3. {
  4.   text-decoration: none;
  5.   color: ffff57;
  6.   transition: color 0.3s ease;
  7. }
  8.  
  9. a:hover
  10. {
  11.   color: tomato;
  12. }
  13. #menuToggle
  14. {
  15.   display: block;
  16.   position: relative;
  17.   top: -40px;
  18.   left: 50px;
  19.  
  20.   z-index: 1;
  21.  
  22.   -webkit-user-select: none;
  23.   user-select: none;
  24. }
  25.  
  26. #menuToggle input
  27. {
  28.   display: block;
  29.   width: 40px;
  30.   height: 32px;
  31.   position: absolute;
  32.   top: -7px;
  33.   left: -5px;
  34.  
  35.   cursor: pointer;
  36.  
  37.   opacity: 0; /* hide this */
  38.   z-index: 2; /* and place it over the hamburger */
  39.  
  40.   -webkit-touch-callout: none;
  41. }
  42. #menuToggle span
  43. {
  44.   display: block;
  45.   width: 33px;
  46.   height: 4px;
  47.   margin-bottom: 5px;
  48.   position: relative;
  49.  
  50.   background: #cdcdcd;
  51.   border-radius: 3px;
  52.  
  53.   z-index: 1;
  54.  
  55.   transform-origin: 4px 0px;
  56.  
  57.   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  58.               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  59.               opacity 0.55s ease;
  60. }
  61. #menuToggle span:first-child
  62. {
  63.   transform-origin: 0% 0%;
  64. }
  65. #menuToggle span:nth-last-child(2)
  66. {
  67.   transform-origin: 0% 100%;
  68. }
  69. #menuToggle input:checked ~ span
  70. {
  71.   opacity: 1;
  72.   transform: rotate(45deg) translate(-2px, -1px);
  73. }
  74. #menuToggle input:checked ~ span:nth-last-child(3)
  75. {
  76.   opacity: 0;
  77.   transform: rotate(0deg) scale(0.2, 0.2);
  78. }
  79. #menuToggle input:checked ~ span:nth-last-child(2)
  80. {
  81.   transform: rotate(-45deg) translate(0, -1px);
  82. }
  83. #menu
  84. {
  85. background-color: 80D8ff;
  86. padding: 2px;
  87. border-color: ffff57; 
  88. border:solid;
  89.   position: absolute;
  90.   max-height:110px;
  91. min-height:110px;
  92. overflow:hidden;
  93.   width: 100%;
  94.   margin: 10px 0 0 -50px;
  95.   padding-top: 10px;
  96.  padding-left: 10px; 
  97.   list-style-type: none;
  98.   -webkit-font-smoothing: antialiased;  
  99.   transform-origin: 0% 0%;
  100.   transform: translate(-100%, 0);
  101.  
  102.   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  103. }
  104.  
  105. #menuToggle input:checked ~ ul
  106. {
  107.   transform: none;
  108. }
  109. </http://december.com/html/4/element/style.html>
  110.  
  111.  
  112.  
  113.   <http://december.com/html/4/element/div.html id="menuToggle">
  114.  
  115.     <http://december.com/html/4/element/input.html type="checkbox" />
  116.     <http://december.com/html/4/element/span.html></http://december.com/html/4/element/span.html>
  117.     <http://december.com/html/4/element/span.html></http://december.com/html/4/element/span.html>
  118.     <http://december.com/html/4/element/span.html></http://december.com/html/4/element/span.html>
  119.     <http://december.com/html/4/element/ul.html id="menu">
  120. 	od->tego  inputa nie widzę: <http://december.com/html/4/element/input.html type = "text" name ="from" id = "from"/>
  121.     </http://december.com/html/4/element/ul.html>
  122.   </http://december.com/html/4/element/div.html>
[HTML] pobierz, plaintext


jakaś podpwoiwedź

Napisany przez: trueblue 9.06.2019, 18:53:58

Który input stylujesz w CSS?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)