https://randomovie.org olarak değişmiş
en basit olarak şöyle yapabilirsin;
<select id="form-validation-field-0" class="form-text ">
<option value="">Seçiniz</option>
<option value="60">seçenek 1</option>
<option value="65">seçenek 2</option>
</select>
<script>
document.querySelector('#form-validation-field-0 option[value="60"]').setAttribute('selected', 'selected');
</script>
ben denedim oluyor. önce font-awesome'ı dahil ettiğinden emin ol.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
jquery'i dahil ettiğinden emin ol
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
ve kodlarını etiktenden sonra yazdığından emin ol.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div id="music-container">
<i class="fas fa-volume-down"></i>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('#music-container i').on('click', function() {
$(this).removeClass('fa-volume-down').addClass('fa-volume-mute');
});
</script>
aslında kısmen haklısın kısmen haklı değil, çünkü öğrenmek kişinin elinde olan bir şey.
amerikadaki yetenek sizsiniz'e katılan bir çocuk vardı, gitarla ilgili inanılmaz bir gösteri sundu. nereden öğrendiğini sorduklarında ise sadece youtubedaki videoları izleyerek öğrendiğini söyledi.
yani demek ki isteyen bunlarlada öğrenip kendini yeterince geliştirebiliyor. kimi izleyip izlemeyeceğin ise zaten sana kalmış bir şey, ama birisine neden anlatıyorsun diye kızmak saçma olur.
youtube'da ise bu kişiler örneğin beğenmeme butonu vermiş sana youtube özgürce ifade edebilirsin, video altında fikirlerini özgürce kimseyi kırmadan ifade edebilirsin.
yani bunun bir cahillikle alakası yok, herkes bir şeyler yapmak istiyor, kimileri yapabiliyor kimileri yapamıyor ama önemli olan bir şeyleri yapabilme cesaretini kendinde bulabilmiş olması. cahil cesaretide diyebilirsin buna, ama o kişi ya da kişilerin bir süre sonra daha iyi anlatmayacağınında garantisi yok.
daha kötüyede gidebilir, kendini geliştirip daha iyi şeylerde anlatabilir.
bu konu bence tamamen nereden baktığına bağlı, banada saçma geliyor 1 saatte css öğren gibi videolar. ya da udemy'de web eğitimi adı altında bildiği bütün herşeyi anlatıp eğitim seti olarak satan insanlar, ama bunun yanında gerçekten bu işi severek yapan insanlarında olduğuna inanıyorum. önemli olan doğruyu yanlışı ayırt edebilecek duruma gelmek. çünkü bakıyorsun adam eğitim aldığı videonun altına çok güzel anlatmışsın çok bilgilisin yazıyor, bir kere bunu yazacak bilgi birikimi onda yok ki neye göre değerlendirdi çok iyi olduğunu? işte bu ve bunun gibi durumlardan dolayı ortalık biraz karışsada yinede doğru bilgi bir şekilde yolunu buluyor. doğru bilgiye ulaşamayanlarsa.. onlar için üzülmekten başka çaremiz yok şimdilik :)
aslında olay position
ile konumlandırıp :hover
olunca göstermekten ibaret. Şöyle bir html yapın olsun;
<nav class="sticky-menu">
<ul>
<li>
<a href="#">
<span class="title">Homepage</span>
<span class="icon">
<i class="fa fa-home"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="title">About us</span>
<span class="icon">
<i class="fa fa-user"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="title">Youtube</span>
<span class="icon">
<i class="fab fa-youtube"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="title">Contact</span>
<span class="icon">
<i class="fa fa-envelope-open"></i>
</span>
</a>
</li>
</ul>
</nav>
css'inde şöyle olacak
/* genel sıfırlama */
* {
padding: 0;
margin: 0;
list-style: none;
border: none;
box-sizing: border-box;
text-decoration: none;
font-family: Arial, sans-serif;
}
.sticky-menu {
position: fixed;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.sticky-menu ul li {
margin-bottom: 10px;
}
.sticky-menu ul li:last-child {
margin-bottom: 0;
}
.sticky-menu ul li a {
position: relative;
display: block;
}
.sticky-menu ul li a .title {
height: 40px;
padding: 0 65px 0 25px;
position: absolute;
top: 0;
right: 0;
background: darkorange;
display: flex;
align-items: center;
border-radius: 20px;
opacity: 0;
visibility: hidden;
transition: 150ms all ease;
font-size: 14px;
color: #fff;
white-space: nowrap;
}
.sticky-menu ul li a .icon {
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
background: #eee;
border-radius: 50%;
position: relative;
z-index: 1;
color: darkorange;
transition: 150ms all ease;
}
.sticky-menu ul li a:hover .icon {
background: darkorange;
color: #fff;
}
.sticky-menu ul li a:hover .title {
opacity: 1;
visibility: visible;
}
çalışan demo: https://codepen.io/recephp/pen/abWpWro