Scrollable Navigation
How do I make an scrollable navigation?
What is a scrollable navigation? How do you make a scrollable navigation? This script and codes were developed by Kenan Yusuf on 06 December 2022, Tuesday.
Scrollable Navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scrollable Navigation</title> <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,700|Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="device"> <div class="window"> <header class="header"> <h1 class="brand">Scrollable nav</h1> </header> <nav class="navigation"><a class="navigation__item" href="#">Home</a><a class="navigation__item" href="#">About</a><a class="navigation__item" href="#">Work</a><a class="navigation__item" href="#">Contact</a></nav> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Scrollable Navigation - Script Codes CSS Codes
* { box-sizing: border-box;
}
html,
body { height: 100%;
}
body { display: flex; align-items: center; justify-content: center; height: 100%; background: #4caf50; font-family: 'Source Sans Pro', sans-serif;
}
.device { padding-top: 35px; background: #2e7d32; border-radius: 15px; margin: 20px;
}
.window { position: relative; height: 450px; min-width: 300px; width: 100%; max-width: 600px; background: #e6e6e6; -webkit-overflow-scrolling: touch;
}
.header { display: flex; justify-content: center; align-items: center; height: 100px; background: #388e3c;
}
.brand { margin: 0; font-family: 'Alegreya Sans', sans-serif; font-size: 40px; font-weight: 700; color: #fff;
}
.navigation { display: flex; justify-content: space-between; align-items: center; width: 100%; list-style: none; padding: 0; margin: 0; overflow-x: auto; background: #fff; border-bottom: 2px solid #ccc;
}
.navigation__item { padding: 20px 30px; color: #7b7b7b; text-transform: uppercase; text-decoration: none; font-weight: 700;
}
.navigation__item:hover { color: #388e3c;
}
Scrollable Navigation - Script Codes JS Codes
$('.window').resizable({ handles: 'e'
})
Developer | Kenan Yusuf |
Username | KenanYusuf |
Uploaded | December 06, 2022 |
Rating | 3.5 |
Size | 3,141 Kb |
Views | 14,168 |
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!
Name | Size |
Page layout experiment | 5,391 Kb |
A Pen by Kenan Yusuf | 2,582 Kb |
Material Weather Widget with Moment.js | 5,929 Kb |
Card awaiting content | 4,012 Kb |
Slick carousel with detached captions | 3,150 Kb |
Slick vs Flickity | 3,933 Kb |
Styling unvisited links | 2,816 Kb |
Kyusuf.com layout | 3,467 Kb |
EU Referendum Ballot Paper | 4,023 Kb |
Slick carousel with detached captions - Figure Variant | 3,339 Kb |
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!
Name | Username | Size |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Medium Menu | Lucasmotta | 3,923 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!