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:
<style> a { text-decoration: none; color: ffff57; transition: color 0.3s ease; } a:hover { color: tomato; } #menuToggle { display: block; position: relative; top: -40px; left: 50px; z-index: 1; -webkit-user-select: none; user-select: none; } #menuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; } #menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; } #menuToggle span:first-child { transform-origin: 0% 0%; } #menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; } #menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); } #menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } #menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } #menu { background-color: 80D8ff; padding: 2px; border-color: ffff57; border:solid; position: absolute; max-height:110px; min-height:110px; overflow:hidden; width: 100%; margin: 10px 0 0 -50px; padding-top: 10px; padding-left: 10px; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); } #menuToggle input:checked ~ ul { transform: none; } </style> <div id="menuToggle"> <input type="checkbox" /> <ul id="menu"> od->tego inputa nie widzę: <input type = "text" name ="from" id = "from"/> </ul> </div>
jakaś podpwoiwedź