1. Home
  2. Docs
  3. Phantom
  4. Hexagon Menu

Hexagon Menu

Menu item looks like the below image

To achive this section you have edit this following codes

[code language=”html”]
<div class="hexagon-menu clear">
<div class="hexagon-item">
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<a href="welcome.html" class="hex-content">
<span class="hex-content-inner">
<span class="icon">
<i class="tf-dial"></i>
</span>
<span class="title">Welcome</span>
</span>
<svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
</a>
</div>
<div class="hexagon-item">
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<a href="about.html" class="hex-content">
<span class="hex-content-inner">
<span class="icon">
<i class="tf-profile-male"></i>
</span>
<span class="title">About</span>
</span>
<svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
</a>
</div>
<div class="hexagon-item">
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<a href="services.html" class="hex-content">
<span class="hex-content-inner">
<span class="icon">
<i class="tf-tools-2"></i>
</span>
<span class="title">Services</span>
</span>
<svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
</a>
</div>
<div class="hexagon-item">
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<a href="resume.html" class="hex-content">
<span class="hex-content-inner">
<span class="icon">
<i class="tf-tools"></i>
</span>
<span class="title">Resume</span>
</span>
<svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
</a>
</div>
<div class="hexagon-item">
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<a href="works.html" class="hex-content">
<span class="hex-content-inner">
<span class="icon">
<i class="tf-briefcase2"></i>
</span>
<span class="title">Works</span>
</span>
<svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
</a>
</div>
<div class="hexagon-item">
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<a href="testimonials.html" class="hex-content">
<span class="hex-content-inner">
<span class="icon">
<i class="tf-chat"></i>
</span>
<span class="title">Testimonials</span>
</span>
<svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
</a>
</div>
<div class="hexagon-item">
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<a href="contact.html" class="hex-content">
<span class="hex-content-inner">
<span class="icon">
<i class="tf-envelope2"></i>
</span>
<span class="title">Contact</span>
</span>
<svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
</a>
</div>
</div> <!– /.hexagon-menu –>
[/code]

To add more blocks you have to just copy and paste this following codes

[code language=”html”]
<div class="hexagon-item">
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<div class="hex-item">
<div></div>
<div></div>
<div></div>
</div>
<a href="welcome.html" class="hex-content">
<span class="hex-content-inner">
<span class="icon">
<i class="tf-dial"></i>
</span>
<span class="title">Welcome</span>
</span>
<svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
</a>
</div>
[/code]

Was this article helpful to you? Yes No

How can we help?