Skip to content

Instantly share code, notes, and snippets.

@cedeber

cedeber/navbar.html

Last active April 27, 2016 06:38
Show Gist options
  • Save cedeber/2c94b4a16f24eeda66ab43ffac74cb0d to your computer and use it in GitHub Desktop.
Save cedeber/2c94b4a16f24eeda66ab43ffac74cb0d to your computer and use it in GitHub Desktop.
Download ZIP
SVG Navigation Bar - Browser-like
Raw
navbar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.navbar {
overflow: hidden;
border: solid 1px #dbdbdb;
border-radius: 5px 5px 0 0;
line-height: 0;
}
</style>
</head>
<body>
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="navigatorBar" width="100%" height="40px">
<rect fill="#f6f6f6" x="0px" y="0px" width="100%" height="40px" rx="0px" ry="0px"/>
<circle fill="#dddddd" stroke="#d1d1d1" stroke-width="1" cx="16" cy="20" r="6"/>
<circle fill="#dddddd" stroke="#d1d1d1" stroke-width="1" cx="36" cy="20" r="6"/>
<circle fill="#dddddd" stroke="#d1d1d1" stroke-width="1" cx="56" cy="20" r="6"/>
<rect fill="white" x="74px" y="7px" width="100%" height="26px" rx="3px" ry="3px"/>
<a xlink:href="http://www.openinteractive.ch" target="_blank">
<text x="84px" y="24px" fill="#b0b0b0" style="font-family:monospace;font-size:14px;line-height:14px">
www.openinteractive.ch
</text>
</a>
<svg viewBox="0 0 18 40" width="100%" height="40px" preserveAspectRatio="xMaxYMin meet">
<rect fill="#f6f6f6" x="5px" y="0px" width="100%" height="40px" rx="0px" ry="0px"/>
<rect fill="white" x="0px" y="7px" width="10px" height="26px" rx="3px" ry="3px"/>
</svg>
</symbol>
</defs>
</svg>
<div class="navbar"><svg width="100%" height="40px"><use xlink:href="#navigatorBar"></use></svg></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment