Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> input w hamburgerze nie działa, Zrobiłem hamburger menu i nie mogę zobaczyć "input text"
frankiejojo
post 9.06.2019, 17:44:57
Post #1





Grupa: Zarejestrowani
Postów: 111
Pomógł: 2
Dołączył: 20.07.2014

Ostrzeżenie: (0%)
-----


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


jakaś podpwoiwedź
Go to the top of the page
+Quote Post
trueblue
post 9.06.2019, 18:53:58
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Który input stylujesz w CSS?


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 16:15