Wed, 2022-02-09 17:33
Hello to everybode!
I found on internet a custom select menu, made with HTML and CSS.
The problem is that when I am using it inside a <nav>
tag it is looking and behaving different than when it is alone on the webpage.
Here is the original from internet:
HTML:
<form> <ul class="select"> <li> <input class="select_close" type="radio" name="awesomeness" id="awesomeness-close" value=""/> <span class="select_label select_label-placeholder">#</span> </li> <li class="select_items"> <input class="select_expand" type="radio" name="awesomeness" id="awesomeness-opener"/> <label class="select_closeLabel" for="awesomeness-close"></label> <ul class="select_options"> <li class="select_option"> <input class="select_input" type="radio" name="awesomeness" id="awesomeness-ridiculous"/> <label class="select_label" for="awesomeness-ridiculous">@ ASD</label> </li> <li class="select_option"> <input class="select_input" type="radio" name="awesomeness" id="awesomeness-reasonable"/> <label class="select_label" for="awesomeness-reasonable">E* ERD</label> </li> <li class="select_option"> <input class="select_input" type="radio" name="awesomeness" id="awesomeness-lacking"/> <label class="select_label" for="awesomeness-lacking">@ TRF</label> </li> <li class="select_option"> <input class="select_input" type="radio" name="awesomeness" id="awesomeness-awesomeless"/> <label class="select_label" for="awesomeness-awesomeless">% QWE</label> </li> </ul> <label class="select_expandLabel" for="awesomeness-opener"></label> </li> </ul> </form>
CSS:
* { position: relative; margin: 0; padding: 0; box-sizing: border-box; border-color: inherit; } form { width: 114px; height: 100%; padding-bottom: 75px; display: flex; justify-content: center; align-items: center; margin-left: 30px; } ul { list-style: none; } .select { width: 225px; height: 40px; cursor: pointer; background-color: white; box-shadow: 0 2px 0 white; border-radius: 2px; } .select_expand { width: 0; height: 40px; position: absolute; top: 0; right: 0; } .select_expand::after { content: '\003E'; position: absolute; top: 50%; right: 27px; transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75); color: black; font-size: 10px; pointer-events: none; z-index: 2; transition: all 250ms cubic-bezier(.4, .25, .3, 1); } .select_expand:hover::after { opacity: 1; } .select_expand:checked::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scaleY(1.75); } .select_expandLabel { display: block; width: 100%; height: 40px; position: absolute; top: 0; left: 0; cursor: pointer; } .select_close { display: none } .select_closeLabel { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; display: none; } .select_items { width: 100%; position: absolute; top: 0; left: 0; padding-top: 40px; } .select_input { display: none } .select_label { transition: all 250ms cubic-bezier(.4, .25, .3, 1); display: block; height: 0; font-size: 18px; line-height: 40px; overflow: hidden; color: black; background-color: #fff; cursor: pointer; padding-left: 15px; } .select_label-placeholder { height: 40px; vertical-align: middle; position: absolute; top: 0; padding-left: 15px; } .select_expand:checked+.select_closeLabel { display: block; box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.1); } .select_expand:checked+.select_closeLabel+.select_options .select_label { height: 40px; } .select_expand:checked+.select_closeLabel+.select_options .select_label:hover { background-color: #f7f7f7 } .select_expand:checked+.select_closeLabel+.select_options+.select_expandLabel { display: none } .select_input:checked+.select_label { height: 40px; margin-top: -40px; }
And here is code with navbar:
HTML:
<div class="App"> <nav> <div class="nav-links"> <ul class="navbar"> <li class='div-links'> Link </li> </ul> </div> <div class="brand-logo"> <img src="" alt="icon" /> </div> <div class="cart-currency"> <form> <ul class="select"> <li> <input class="select_close" type="radio" name="awesomeness" id="awesomeness-close" value=""/> <span class="select_label select_label-placeholder">#</span> </li> <li class="select_items"> <input class="select_expand" type="radio" name="awesomeness" id="awesomeness-opener"/> <label class="select_closeLabel" for="awesomeness-close"></label> <ul class="select_options"> <li class="select_option"> <input class="select_input" type="radio" name="awesomeness" id="awesomeness-ridiculous"/> <label class="select_label" for="awesomeness-ridiculous">@ ASD</label> </li> <li class="select_option"> <input class="select_input" type="radio" name="awesomeness" id="awesomeness-reasonable"/> <label class="select_label" for="awesomeness-reasonable">E* ERD</label> </li> <li class="select_option"> <input class="select_input" type="radio" name="awesomeness" id="awesomeness-lacking"/> <label class="select_label" for="awesomeness-lacking">@ TRF</label> </li> <li class="select_option"> <input class="select_input" type="radio" name="awesomeness" id="awesomeness-awesomeless"/> <label class="select_label" for="awesomeness-awesomeless">% QWE</label> </li> </ul> <label class="select_expandLabel" for="awesomeness-opener"></label> </li> </ul> </form> <div class='logo'> <img src="" alt="cart" class='cart' /> </div> </div> </nav> </div>
And CSS:
*{ padding: 0; margin: 0; } nav { display: flex; position: fixed; justify-content: space-between; z-index: 9990; top: 0; width: 100%; background-color: white; font-size: 1.2rem; height: 60px; } .nav-links { justify-self: flex-start; position: relative; margin-left: 70px; flex: 1 0 33%; } .navbar { list-style-type: none; margin: 0; padding: 0; } nav li { display: inline; float: left; padding: 1rem; } .brand-logo { align-self: center; position: relative; flex: 1 0 33%; } .cart-currency { text-align: center; position: relative; flex: 1 0 33%; justify-self: flex-end; } form { width: 114px; height: 100%; padding-bottom: 75px; display: flex; justify-content: center; align-items: center; margin-left: 30px; box-sizing: border-box; border-color: inherit; position: relative; } ul { list-style: none; } .select { width: 225px; height: 40px; cursor: pointer; background-color: white; box-shadow: 0 2px 0 white; border-radius: 2px; } .select_expand { width: 0; height: 40px; position: absolute; top: 0; right: 0; } .select_expand::after { content: '\003E'; position: absolute; top: 50%; right: 27px; transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75); color: black; font-size: 10px; pointer-events: none; z-index: 2; transition: all 250ms cubic-bezier(.4, .25, .3, 1); } .select_expand:hover::after { opacity: 1; } .select_expand:checked::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scaleY(1.75); } .select_expandLabel { display: block; width: 100%; height: 40px; position: absolute; top: 0; left: 0; cursor: pointer; } .select_close { display: none } .select_closeLabel { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; display: none; } .select_items { width: 100%; position: absolute; top: 0; left: 0; padding-top: 40px; } .select_input { display: none } .select_label { transition: all 250ms cubic-bezier(.4, .25, .3, 1); display: block; height: 0; font-size: 18px; line-height: 40px; overflow: hidden; color: black; background-color: #fff; cursor: pointer; padding-left: 15px; box-sizing: border-box; border-color: inherit; position: relative; } .select_label-placeholder { height: 40px; vertical-align: middle; position: absolute; top: 0; padding-left: 15px; } .select_expand:checked+.select_closeLabel { display: block; box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.1); } .select_expand:checked+.select_closeLabel+.select_options .select_label { height: 40px; } .select_expand:checked+.select_closeLabel+.select_options .select_label:hover { background-color: #f7f7f7 } .select_expand:checked+.select_closeLabel+.select_options+.select_expandLabel { display: none } .select_input:checked+.select_label { height: 40px; margin-top: -40px; } .logo { position: relative; } .cart { display: inline-block; width: 20px; height: 20px; }
Could you please help me?
Thank you!