Merhaba ilk sorunuza gelecek olursak aşağıdaki şekildeki gibi bir kod işinizi görür mü bilmem ama ben yine de gönderiyim. belki işinize yarar.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menü Denemesi</title>
<style>
body {
font-family: Verdana, sans-serif;
font-size: 1rem;
}
#navigasyon_span {
position: absolute;
top: 50%;
left: 50%;
}
#navigasyon {
visibility: hidden;
list-style: none;
padding:0;
margin: 0;
}
#navigasyon li {
border-bottom: 1px solid black;
}
#menu {
font-weight: bold;
}
</style>
<script>
var menu;
var nav;
var menuAcık = false;
function init()
{
menu = document.getElementById('menu');
nav = document.getElementById('navigasyon');
menu.addEventListener('click', menuGoster);
nav.addEventListener('mouseover', navMouseover);
nav.addEventListener('mouseout', navMouseout);
}
function menuGoster() {
nav.style.visibility = nav.style.visibility === 'visible' ? 'hidden' : 'visible';
}
function onClick() {
if(menuAcık) return;
nav.style.visibility = 'hidden';
}
function navMouseover() {
menuAcık = true;
}
function navMouseout() {
menuAcık = false;
}
window.addEventListener('load', init);
window.addEventListener('mousedown', onClick);
</script>
</head>
<body>
<span id="navigasyon_span">
<span id="menu"><a href="#">Menü</a></span>
<ul id="navigasyon">
<li>Ana Sayfa</li>
<li>Ürünler</li>
<li>İletişim</li>
<li>Blog</li>
</ul>
</span>
</body>
</html>
ikinci sorunuza gelecek olursak efektleri backdrop-filter ile ekleyebilirsiniz.
Bknz.: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
iyi çalışmalar,
şenol
