GreedyNav Update

Developer
Lukejacksonn
Size
3,007 Kb
Views
14,168
  1. GreedyNav Update Previews
  2. GreedyNav Update HTML Codes
  3. GreedyNav Update CSS Codes
  4. GreedyNav Update JS Codes

How do I make an greedynav update?

A very much more performant rewrite of one of my previous pens. This version also takes advantage of flexbox to achieve a lot less hacky layout and calcs. *** Work in progress***. What is a greedynav update? How do you make a greedynav update? This script and codes were developed by Lukejacksonn on 30 November 2022, Wednesday.

GreedyNav Update Previews
IQ Test

GreedyNav Update - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GreedyNav Update</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class='greedy'> <h1>GreedyNav</h1> <ul class='links'> <li><a href='#'>navbar</a></li> <li><a href='#'>that</a></li> <li><a href='#'>handles</a></li> <li><a href='#'>overflowing</a></li> <li><a href='#'>menu</a></li> <li><a href='#'>elements</a></li> <li><a href='#'>effortlessly</a></li> </ul> <button>MENU</button> <ul class='hidden-links hidden'></ul>
</nav>
<p>This project is on <a target="_blank" href="https://github.com/lukejacksonn/GreedyNav">github</a></p>
<h5>Resize the window and any overflowing items will get stacked into the dropdown menu</h5> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

GreedyNav Update - Script Codes CSS Codes

nav.greedy { position: relative; height: 60px; display: flex; align-items: center; background: #f2f2f2;
}
nav.greedy h1 { display: flex; align-self: stretch; align-items: center; background: #d8d8d8; color: #404040; padding: 0 1.5rem; font-weight: bold;
}
nav.greedy button { align-self: stretch; transition: all .4s ease-out; padding: 0 1rem 0 1.5rem; outline: 0; border: 0; font-size: 0.9rem; font-weight: bold; background: #c8c8c8; color: #404040;
}
nav.greedy button.hidden { transition: none; border-right: 0.5rem solid #b6b6b6; width: 0; padding: 0; overflow: hidden;
}
nav.greedy button::after { content: attr(count); display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; background: #9f9f9f; color: #f2f2f2; box-shadow: 0 0 1px 0 rgba(0,0,0,0.8); border-radius: 50%; font-size: 14px; line-height: 14px; margin-left: 1rem; margin-right: calc(-1rem + -8px);
}
ul.links { display: flex; justify-content: flex-end; flex: 1; overflow: hidden;
}
ul.links li { flex: none; padding: 1rem;
}
ul.links li a { color: #404040;
}
ul.hidden-links { position: absolute; background: #d8d8d8; right: 0; top: 100%;
}
ul.hidden-links li a { color: #404040; padding-right: 1rem;
}
ul.hidden-links.hidden { display: none;
}
ul.hidden-links li { padding: 1rem;
}
/*
-- Demo Styles
*/
* { box-sizing: border-box;
}
html { background: #fefefe;
}
body { padding: 2rem;
}
h5 { text-align: center; margin: auto; font-size: 0.8rem; line-height: 140%; margin-top: 1rem; max-width: 50ex;
}
p { text-align: center; margin-top: 3rem;
}
html { width: 100%; height: 100%; font-family: Helvetica, sans-serif;
}

GreedyNav Update - Script Codes JS Codes

$(function() { var $nav = $('nav.greedy'); var $btn = $('nav.greedy button'); var $vlinks = $('nav.greedy .links'); var $hlinks = $('nav.greedy .hidden-links'); var numOfItems = 0; var totalSpace = 0; var breakWidths = []; // Get initial state $vlinks.children().outerWidth(function(i, w) { totalSpace += w; numOfItems += 1; breakWidths.push(totalSpace); }); var availableSpace, numOfVisibleItems, requiredSpace; function check() { // Get instant state availableSpace = $vlinks.width() - 10; numOfVisibleItems = $vlinks.children().length; requiredSpace = breakWidths[numOfVisibleItems - 1]; // There is not enought space if (requiredSpace > availableSpace) { $vlinks.children().last().prependTo($hlinks); numOfVisibleItems -= 1; check(); // There is more than enough space } else if (availableSpace > breakWidths[numOfVisibleItems]) { $hlinks.children().first().appendTo($vlinks); numOfVisibleItems += 1; } // Update the button accordingly $btn.attr("count", numOfItems - numOfVisibleItems); if (numOfVisibleItems === numOfItems) { $btn.addClass('hidden'); } else $btn.removeClass('hidden'); } // Window listeners $(window).resize(function() { check(); }); $btn.on('click', function() { $hlinks.toggleClass('hidden'); }); check();
});
GreedyNav Update - Script Codes
GreedyNav Update - Script Codes
Home Page Home
Developer Lukejacksonn
Username lukejacksonn
Uploaded November 30, 2022
Rating 4.5
Size 3,007 Kb
Views 14,168
Do you need developer help for GreedyNav Update?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lukejacksonn (lukejacksonn) Script Codes
Name
Flexbox Email Template
Inline Radio Buttons
Flexy Google Homepage
Peeky Password
Favorite Heart
Greedy Navigation
Pinger
Hero Flex-list
Flexbox Masonry
Lorem Ipsum Generator
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!