Beispiel:CSS-calc-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!doctype html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" >
 <title>Kreisförmige Navigation mit sibling-count()</title>
 <style>
   :root {
     font-family: sans-serif;
     /* responsiv: */
     font-size: clamp(.7rem, 3vw, 1rem);
   }

   * {
     box-sizing: border-box;
   }

   body {
     display: grid;
     place-items: center;
     padding-top: 1rem;
   }

   main {
     display: grid;
     gap: 1rem;
     justify-items: center;
   }

   #nav-list {
     /* der grosse farbige Kreis */
     --menu-size: 32rem;
     --item-size: 7rem;
     --radius: calc((var(--menu-size) - var(--item-size)) / 2.08);

     list-style: none;
     position: relative;
     width: var(--menu-size);
     aspect-ratio: 1;
     display: grid;
     place-items: center;
     margin: 0;
     padding: 0;
     border-radius: 50%;
     background: conic-gradient(#f25d6d, #f0bf4c, #50bd73, #39b5d5, #7a78df, #e75ea7, #f25d6d);
     box-shadow: 0 0 1rem oklch(.3 0 0 / .5);
   }

   #nav-list::before {
     /* Kreis im Zentrum */
     content: "Webdesign";
     width: 50%;
     aspect-ratio: 1;
     display: grid;
     place-items: center;
     border-radius: 50%;
     background: white;
     font-size: 2.5rem;
     text-align: center;
   }

   #nav-list li {
     /*
       sibling-index() liefert die Position, sibling-count() die Gesamtzahl.
       Daraus entstehen Winkel und Farbe ohne fest programmierte Palette.
     */
     --position: sibling-index();
     --items: sibling-count();
     --hue: calc((var(--position) - 1) * 360deg / var(--items));
     --angle: calc(var(--hue) - 90deg);

     position: absolute;
     top: 50%;
     left: 50%;
     width: var(--item-size);
     height: var(--item-size); /* für Safari */
     aspect-ratio: 1;
     border: medium solid white;
     border-radius: 50%;
     background: #FFF0C6;
     box-shadow: 0 0 1rem oklch(.3 0 0 / .5);
     transform:
       rotate(var(--angle))
       translate(var(--radius))
       rotate(calc(-1 * var(--angle)))
       translate(-50%, -50%);
   }

   nav a {
     width: 100%;
     height: 100%;
     display: grid;
     place-items: center;
     border-radius: inherit;
     font-weight: bold;
   }

   nav a span {
     /* zum Zentrieren der Texte */
     display: block;
     width: 100%;
     text-align: center;
   }

   nav a:hover,
   nav a:focus-visible {
     outline: .3rem solid rgb(255 255 255 / 70%);
     outline-offset: .2rem;
     background: #FFE6A0;
   }

   .controls {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: .7rem;
   }

   .controls button {
     font-size: 1.5rem;
     cursor: pointer;
   }

   .controls button:disabled {
     opacity: 0.7;
     cursor: not-allowed;
   }
 </style>

</head> <body> 

 <main>
   <nav>

   </nav>

     <button id="btn-minus" type="button" aria-label="Element entfernen">−</button>
     <button id="btn-plus" type="button" aria-label="Element hinzufügen">+</button>
     5 Elemente

 </main>

 <script>
   const navList = document.querySelector("#nav-list");
   const btnMinus = document.querySelector("#btn-minus");
   const btnPlus = document.querySelector("#btn-plus");
   const countDisplay = document.querySelector("#count-display");
   const countLabel = document.querySelector("#count-label");

   const labels = [
     "Start",
     "Grundlagen",
     "Angebote",
     "Über uns",
     "Impressum",
     "Kontakt",
     "Blog",
     "FAQ",
     "Service"
   ];

   const minItems = 2;
   const maxItems = labels.length;
   let itemCount = 5;

   function renderMenu() {
     navList.replaceChildren();

     labels.slice(0, itemCount).forEach((label) => {
       const linkText = document.createElement("span");
       linkText.textContent = label;

       const link = document.createElement("a");
       link.href = `#`;
       link.append(linkText);

       const item = document.createElement("li");
       item.append(link);

       navList.append(item);
     });

     countDisplay.textContent = itemCount;
     countLabel.textContent = "Elemente — CSS zählt selbst";
     btnMinus.disabled = itemCount <= minItems;
     btnPlus.disabled = itemCount >= maxItems;
   }

   btnMinus.addEventListener("click", () => {
     if (itemCount > minItems) {
       itemCount--;
       renderMenu();
     }
   });

   btnPlus.addEventListener("click", () => {
     if (itemCount < maxItems) {
       itemCount++;
       renderMenu();
     }
   });

   renderMenu();
 </script>

</body> </html>

Abgerufen am 15.06.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-calc-1.html"