OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to get the submenu to work with clippath when using it as a design as apposed to images

  • Thread starter Thread starter user24450056
  • Start date Start date
U

user24450056

Guest
Learning modern nav-bars/menus. I recently saw a cool effect with clip path to create a similar effect without using images. How ever this clip path seems to be stop my sub-menu from working or from being seen.

I've tried increasing it and everything but then it removes the design i have. I've tried overflow and z-index as well.

below is the issue, and also, I have read the how to ask questions several times and have found it not helpful, also i have a mental disability so no need to be rude....


Code:
<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <style>
        /* Define Variables */
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

        /* Navigation Style */
        .flex-container {
            display: flex;
            justify-content: center;
            background: linear-gradient(0deg, black 49%, #5c5c5c 51%);
        }

        .flex-container>div {
            background-color: #ffffff;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }

        nav {
            align-content: center;
            margin-inline: auto;
            width: auto;
            align-items: center;
            text-transform: uppercase;
            font-family: 'Roboto Mono', monospace;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: linear-gradient(180deg, #71bfff 49%, #3090e0 51%);
            clip-path: polygon(2% 90%, 98% 90%, 100% 0, 0 0);
            transform: translateZ(0);
        }

        nav ul li {
            float: left;
            position: relative;
        }

        nav ul li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 18px;
            text-decoration: none;
        }

        nav ul li a:hover {
            background: linear-gradient(0deg, black 49%, #252525 51%);
        }

        nav ul li.active {
            background: linear-gradient(0deg, black 49%, #252525 51%);
        }

        /* Submenu styles */
        nav ul li ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: linear-gradient(180deg, #71bfff 49%, #3090e0 51%);
            padding: 0;
            margin: 0;
            list-style: none;
            z-index: 1000;
            /* Ensure the submenu is on top */
        }

        nav ul li:hover>ul {
            display: block;
        }

        nav ul li ul li {
            width: 150px;
        }

        nav ul li ul li a {
            padding: 10px 14px;
            color: white;
            text-align: left;
            /* Align text to the left */
        }
    </style>
</head>

<body>

    <nav class="flex-container">
        <ul>
            <li><a href="#home">HOME</a></li>
            <li class="active"><a href="portal.html">My XFGNX</a></li>
            <li><a href="xbox.html">XBOX</a></li>
            <li><a href="playstation.html">PLAYSTATION</a></li>
            <li><a href="tournaments.html">TOURNAMENTS</a></li>
            <li><a href="#members">MEMBERS</a></li>
            <li><a href="#forums">FORUMS</a></li>
            <li>
                <a href="#more">MORE</a>
                <ul>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#faq">FAQ</a></li>
                </ul>
            </li>
            <li><a href="sprt.html">SUPPORT</a></li>
        </ul>
    </nav>

    <p>Note: under construction</p>

    <table class="darkTable">
        <thead>
            <tr>
                <th colspan="3">Latest Forum Posts</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><i class="bi bi-rss"></i></td>
                <td>New Template is now Revamped!<br>Replies: 7777 | Views: 8888</td>
                <td>~ Mr.Owl</td>
            </tr>
            <tr>
                <td><i class="bi bi-rss"></i></td>
                <td>Exciting News about Upcoming Tournament!</td>
                <td>~ GamingAdmin</td>
            </tr>
            <tr>
                <td><i class="bi bi-rss"></i></td>
                <td>Important Security Update: Please Read!</td>
                <td>~ ITSupport</td>
            </tr>
            <tr>
                <td><i class="bi bi-rss"></i></td>
                <td>Discussion: Best Gaming Moments of the Year</td>
                <td>~ GamingEnthusiast</td>
            </tr>
            <tr>
                <td><i class="bi bi-rss"></i></td>
                <td>Feedback Needed: Website Redesign Proposal</td>
                <td>~ UXDesigner</td>
            </tr>
            <tr>
                <td><i class="bi bi-rss"></i></td>
                <td>Breaking News: Exclusive Game Release Announcement!</td>
                <td>~ GamingJournalist</td>
            </tr>
            <tr>
                <td><i class="bi bi-rss"></i></td>
                <td>Update: Server Maintenance Scheduled for Tomorrow</td>
                <td>~ SystemAdmin</td>
            </tr>
            <tr>
                <td><i class="bi bi-rss"></i></td>
                <td>Reminder: Monthly Community Meetup This Saturday</td>
                <td>~ EventOrganizer</td>
            </tr>
        </tbody>
    </table>

<!-- Code injected by live-server -->
<script>
    // <![CDATA[  <-- For SVG support
    if ('WebSocket' in window) {
        (function () {
            function refreshCSS() {
                var sheets = [].slice.call(document.getElementsByTagName("link"));
                var head = document.getElementsByTagName("head")[0];
                for (var i = 0; i < sheets.length; ++i) {
                    var elem = sheets[i];
                    var parent = elem.parentElement || head;
                    parent.removeChild(elem);
                    var rel = elem.rel;
                    if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                        var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                        elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                    }
                    parent.appendChild(elem);
                }
            }
            var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
            var address = protocol + window.location.host + window.location.pathname + '/ws';
            var socket = new WebSocket(address);
            socket.onmessage = function (msg) {
                if (msg.data == 'reload') window.location.reload();
                else if (msg.data == 'refreshcss') refreshCSS();
            };
            if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
                console.log('Live reload enabled.');
                sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
            }
        })();
    }
    else {
        console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
    }
    // ]]>
</script>
</body>

</html>
<p>Learning modern nav-bars/menus. I recently saw a cool effect with clip path to create a similar effect without using images. How ever this clip path seems to be stop my sub-menu from working or from being seen.</p>
<p>I've tried increasing it and everything but then it removes the design i have. I've tried overflow and z-index as well.</p>
<p>below is the issue, and also, I have read the how to ask questions several times and have found it not helpful, also i have a mental disability so no need to be rude....</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
<style>
/* Define Variables */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

/* Navigation Style */
.flex-container {
display: flex;
justify-content: center;
background: linear-gradient(0deg, black 49%, #5c5c5c 51%);
}

.flex-container>div {
background-color: #ffffff;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}

nav {
align-content: center;
margin-inline: auto;
width: auto;
align-items: center;
text-transform: uppercase;
font-family: 'Roboto Mono', monospace;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(180deg, #71bfff 49%, #3090e0 51%);
clip-path: polygon(2% 90%, 98% 90%, 100% 0, 0 0);
transform: translateZ(0);
}

nav ul li {
float: left;
position: relative;
}

nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 18px;
text-decoration: none;
}

nav ul li a:hover {
background: linear-gradient(0deg, black 49%, #252525 51%);
}

nav ul li.active {
background: linear-gradient(0deg, black 49%, #252525 51%);
}

/* Submenu styles */
nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: linear-gradient(180deg, #71bfff 49%, #3090e0 51%);
padding: 0;
margin: 0;
list-style: none;
z-index: 1000;
/* Ensure the submenu is on top */
}

nav ul li:hover>ul {
display: block;
}

nav ul li ul li {
width: 150px;
}

nav ul li ul li a {
padding: 10px 14px;
color: white;
text-align: left;
/* Align text to the left */
}
</style>
</head>

<body>

<nav class="flex-container">
<ul>
<li><a href="#home">HOME</a></li>
<li class="active"><a href="portal.html">My XFGNX</a></li>
<li><a href="xbox.html">XBOX</a></li>
<li><a href="playstation.html">PLAYSTATION</a></li>
<li><a href="tournaments.html">TOURNAMENTS</a></li>
<li><a href="#members">MEMBERS</a></li>
<li><a href="#forums">FORUMS</a></li>
<li>
<a href="#more">MORE</a>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</li>
<li><a href="sprt.html">SUPPORT</a></li>
</ul>
</nav>

<p>Note: under construction</p>

<table class="darkTable">
<thead>
<tr>
<th colspan="3">Latest Forum Posts</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="bi bi-rss"></i></td>
<td>New Template is now Revamped!<br>Replies: 7777 | Views: 8888</td>
<td>~ Mr.Owl</td>
</tr>
<tr>
<td><i class="bi bi-rss"></i></td>
<td>Exciting News about Upcoming Tournament!</td>
<td>~ GamingAdmin</td>
</tr>
<tr>
<td><i class="bi bi-rss"></i></td>
<td>Important Security Update: Please Read!</td>
<td>~ ITSupport</td>
</tr>
<tr>
<td><i class="bi bi-rss"></i></td>
<td>Discussion: Best Gaming Moments of the Year</td>
<td>~ GamingEnthusiast</td>
</tr>
<tr>
<td><i class="bi bi-rss"></i></td>
<td>Feedback Needed: Website Redesign Proposal</td>
<td>~ UXDesigner</td>
</tr>
<tr>
<td><i class="bi bi-rss"></i></td>
<td>Breaking News: Exclusive Game Release Announcement!</td>
<td>~ GamingJournalist</td>
</tr>
<tr>
<td><i class="bi bi-rss"></i></td>
<td>Update: Server Maintenance Scheduled for Tomorrow</td>
<td>~ SystemAdmin</td>
</tr>
<tr>
<td><i class="bi bi-rss"></i></td>
<td>Reminder: Monthly Community Meetup This Saturday</td>
<td>~ EventOrganizer</td>
</tr>
</tbody>
</table>

<!-- Code injected by live-server -->
<script>
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets;
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
</body>

</html></code></pre>
</div>
</div>
</p>
Continue reading...
 
Top