diff options
author | Andinus <andinus@nand.sh> | 2021-10-09 18:33:40 +0530 |
---|---|---|
committer | Andinus <andinus@nand.sh> | 2021-10-09 18:33:40 +0530 |
commit | 28f2122ce73f197bf28d062f1e6c2bea366bf078 (patch) | |
tree | 09a8fbb20bfd1ab21170359e4acd543feac80840 /src/Navbar.svelte | |
parent | 272dc0801973cd66733ea4f1b0fb7946fa3bb49c (diff) | |
download | dorado-28f2122ce73f197bf28d062f1e6c2bea366bf078.tar.gz |
Initialize Application
Diffstat (limited to 'src/Navbar.svelte')
-rw-r--r-- | src/Navbar.svelte | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/src/Navbar.svelte b/src/Navbar.svelte new file mode 100644 index 0000000..a1a3712 --- /dev/null +++ b/src/Navbar.svelte @@ -0,0 +1,57 @@ +<nav class="ddmenu"> + <a href="#">Home</a> + + <div class="ddgroup"> + Line Drawing Algorithms + <div class="ddsub"> + <a href="#">DDA</a> + <a href="#">Bresenham</a> + </div> + </div> +</nav> + +<style> + .ddmenu { display: flex; } + + .ddmenu a, .ddmenu .ddgroup { + width: 100%; + padding: 15px; + color: var(--fg-main); + text-decoration: none; + background: var(--bg-alt); + border: 2px solid var(--bg-main); + } + .ddmenu a:hover, .ddmenu .ddgroup:hover { + color: var(--fg-special-cold); + background: var(--bg-dim); + cursor: pointer; + } + .ddmenu .ddgroup { position: relative; } + .ddsub { + width: 100%; + position: absolute; + top: 100%; left: 0; + display: none; + } + .ddsub a { + display: block; + box-sizing: border-box; + } + .ddgroup:hover .ddsub { display: block; } + .ddgroup::after { + content: "\27A4"; + position: absolute; + top: 13px; right: 10px; + transition: transform 0.2s; + } + .ddgroup:hover::after { + transform: rotate(90deg); + } + @media screen and (max-width: 640px) { + .ddmenu { flex-wrap: wrap; } + .ddsub { + position: static; + margin-top: 10px; + } + } +</style> |