Mit folgendem Code kann ich ein Menu aufbauen ohne JS:
Was mich stört ist, dass ich diese paar Codezeilen (wenns auch nicht viele sind) so oft wiederholen muss wie ich Reiter hab.
Gibts ne Möglichkeit (nur CSS) dies zu vermeiden ?
HTML
CSS
Was mich stört ist, dass ich diese paar Codezeilen (wenns auch nicht viele sind) so oft wiederholen muss wie ich Reiter hab.
Gibts ne Möglichkeit (nur CSS) dies zu vermeiden ?
Code:
body:has(input[type="radio"][value="menu1"]:checked) .content.one {
display: block;
border: 2px solid black;}
HTML
Code:
<body>
<menu>
<input type="radio" id="menu1" name="menu" value="menu1">
<label for="menu1">MENU-1</label>
<input type="radio" id="menu2" name="menu" value="menu2">
<label for="menu2">MENU-2</label>
<input type="radio" id="menu3" name="menu" value="menu3">
<label for="menu3">MENU-3</label>
</menu>
<div class="content one">
<div class='form-row'>
<label for='id'>Id</label>
<input name='customer[Id]' id='id' size='10' disabled>
<label for='created_at'>Angelegt</label>
<input type='date' name='customer[created_at]' id='created_at' disabled>
<label for='last_modified'>Bearbeitet</label>
<input type='datetime-local' name='customer[last_modified]' id='last_modified' disabled>
</div>
<div class='form-row'>
<label for='company'>Firma</label>
<input type='text' name='customer[company]' id='company'>
</div>
<div class='form-row'>
<label for='vat'>MwSt. Nr.</label>
<input type='text' name='customer[vat]' id='vat'>
</div>
<div class='form-row'>
<label for='salutation'>Anrede</label>
<select name='customer[salutation]' id='salutation' required>
<option style='display:none'></option>
<option value = 'Herr'>Herr</option>
<option value = 'Frau'>Frau</option>
<option value = 'Fräulein'>Fräulein</option>
</select>
<label for='title'>Titel</label>
<select name='customer[title]' id='title'>
<option value = ''></option>
<option value = 'Dr'>Dr.</option>
<option value = 'Professor'>Professor</option>
<option value = 'Professorin'>Professorin</option>
</select>
</div>
<div class='form-row'>
<label for='family_name'>Familienname</label>
<input type='text' name='customer[family_name]' id='family_name'>
</div>
<div class='form-row'>
<label for='first_name'>Vorname</label>
<input type='text' name='customer[first_name]' id='first_name'>
</div>
<div class='form-row'>
<label for='street'>Straße+Nr.</label>
<input type='text' name='customer[street]' id='street' required>
</div>
<div class='form-row'>
<label for='postal_code'>Plz</label>
<input name='customer[postal_code]' id='postal_code' size='4' maxlength='7' required>
<label for='city'>Stadt</label>
<input type='text' name='customer[city]' id='city' required>
</div>
<div class='form-row'>
<label for='country_code'>Ländercode</label>
<input oninput='this.value = this.value.toUpperCase()' name = 'customer[country_code]' id='country_code' size='1' maxlength='2' required>
<label for='country'>Land</label>
<select name='customer[country]' id='country'></select>
</div>
<div class='form-row'>
<label for='date_of_birth'>Geburtsdatum</label>
<input type='date' name='customer[date_of_birth]' id='date_of_birth' >
<label for='national_registration_number'>Nationalregisternummer</label>
<input type='text' name='customer[national_registration_number]' id='national_registration_number'>
</div>
<div class='form-row'>
<label for='phone'>Telefon</label>
<input type='text' name='customer[phone]' id='phone'>
</div>
</div>
<div class="content two">
content 2
</div>
<div class="content three">
content 3
</div>
</body>
Code:
menu {
display: flex;
gap: 1em;
}
.content {display: none;}
menu label {
flex: 1;
background-color: blue;
color: white;
padding: 1em;
&:hover {
cursor: pointer;
transform: scale(1.1);
}
}
input[type="radio"] {
display: none;
}
body:has(input[type="radio"][value="menu1"]:checked) .content.one {
display: block;
border: 2px solid black;}
body:has(input[type="radio"][value="menu2"]:checked) .content.two {
display: block;
border: 2px solid black;}
body:has(input[type="radio"][value="menu3"]:checked) .content.three {
display: block;
border: 2px solid black;}
input[type="radio"]:checked + label {background-color: black;}
) hab ich mir folgendes überlegt :
Kommentar