kayar gizli div yapmak mümkğnmü? Arama yapa tıklayınca açılan gibi

25-02-2017, 17:17:06

Merhaba
Şöyle birşey yapmak istiyorum. Paylaş butonu koycam bu butonun üzerine gelince sağa doğru kayarak paylaşım butonlarını göstermek istiyorum. input şeklinde birçok örneği mevcut internette ama gizli diz bu şekilde örnek bulamadım

bknz araöa için var istediğim tam olarak böyle bişi

<input id="arama" type="search">
<label for="arama">ARA</label>

Sırada ise CSS Kodları var.
label {
background-image: linear-gradient(#8b9da9, #fff6e4);
box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
border: 1px;
cursor: pointer;
display: inline-block;
font:bold 1.2em Helvetica;
margin-left: -.125em;
padding: 11px 20px 11px 20px;
transition: .25s;
color:#fff;
text-shadow:2px 2px 2px #666;
border-radius:5px;
}
 
input:hover +label{border-radius:0 5px 5px 0;}
 
input:hover + label {
background-color: #fa3;
}
input {
background-color: #e0e0e0#;
border: 1px solid #666;
color: #222;
display: inline-block;
font:1.2em Helvetica;
margin-right: -.25em;
outline: 0;
opacity: 0;
padding: 10px;
transition: .55s;
-webkit-transition: .55s;
-moz-transition: .55s;
-ms-transition: .55s;
-o-transition: .55s;
width: 0;
}
input:hover {
opacity: 1;
padding-left: .75em;
padding-right: .75em;
width: 11em;
border-radius:5px 0 0 5px;
}

div için bunu yapmak mümkünmü?

25-02-2017, 17:48:04

Onur89TR

Şimdi yazdım. Umarım işini görür.

Not: 87px ve 24px'i kendi ikon boyutuna göre değiştirmen, matematiksel hesap yapman gerekecektir.

<style>
#Paylas #PaylasYazi {
	float: left;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	overflow: hidden;
	font-family: Arial;
}
#Paylas #PaylasYazi #PaylasButon {
	width: 0px;
	height: 24px;
	line-height: 24px;
	float: left;
	overflow: hidden;
	-moz-transition: width 0.5s;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
}
#Paylas #PaylasYazi:hover #PaylasButon {
	width: 87px;
}
#Paylas #PaylasYazi #PaylasButon a {
	height: 24px;
	float: left;
	background-color: #cc0000;
	display: block;
	overflow: hidden;
	width: 0px;
	-moz-transition: width 0.5s margin-right 0.5s;
	-webkit-transition: width 0.5s margin-right 0.5s;
	transition: width 0.5s, margin-right 0.5s;
	margin-right: 0px;
}
#Paylas #PaylasYazi #PaylasButon a img {
	-moz-transition: width 0.5s;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
	width: 0px;
	height: 24px;
}
#Paylas #PaylasYazi:hover #PaylasButon a {
	width: 24px;
	margin-right: 5px;
}
#Paylas #PaylasYazi:hover #PaylasButon a img {
	width: 24px;
}
</style>
<div id="Paylas">
<div id="PaylasYazi">
<div id="PaylasButon">
	<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
	<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
	<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
</div>
<!-- #PaylasButon -->
Paylaş
</div>
<!-- #PaylasYazi -->
</div>
<!-- #Paylas -->

25-02-2017, 19:06:57

deSefa

Hocam çok teşekkür ederim tam istediğim gibi oldu kendi temama görede biraz ayarlamaya çalıştım oldu lakin içerisine koyduğum icolar ortalı değilde kırmızı kare içinde sağa yazlı duruyor. ben bunları ortalayamadım bunu nasıl yapabilirim? birde hepsinin kuutu kırmızı değilde "facebok" lacivert "twitter" açık mavi gibi arkaplan rengide vermek istiyorum

kodlarınızı şöyle yaptım

<style>
#Paylas #PaylasYazi {
   float: right;
   height: auto;
   line-height: 34px;
   font-size: 14px;
   overflow: hidden;
   font-family: Arial;
}
#Paylas #PaylasYazi #PaylasButon {
   width: 0px;
   height: auto;
   line-height: 34px;
   float: left;
   overflow: hidden;
   -moz-transition: width 0.5s;
   -webkit-transition: width 0.5s;
   transition: width 0.5s;
}
#Paylas #PaylasYazi:hover #PaylasButon {
   width: 167px;
}
#Paylas #PaylasYazi #PaylasButon a {
   height: auto;
   float: left;
   background-color: #cc0000;
   display: block;
   overflow: hidden;
   width: 0px;
   -moz-transition: width 0.5s margin-right 0.5s;
   -webkit-transition: width 0.5s margin-right 0.5s;
   transition: width 0.5s, margin-right 0.5s;
   margin-right: 0px;
}
#Paylas #PaylasYazi #PaylasButon a img {
   -moz-transition: width 0.5s;
   -webkit-transition: width 0.5s;
   transition: width 0.5s;
   width: 0px;
   height: auto;
}
#Paylas #PaylasYazi:hover #PaylasButon a {
   width: 34px;
   margin-right: 5px;
}
#Paylas #PaylasYazi:hover #PaylasButon a img {
   width: 34px;
}
</style>

<div id="Paylas">
<div id="PaylasYazi">
<div id="PaylasButon">
       <a href="#" title="ÖĞRETMEN GİRİŞİ"><i class="fa fa-facebook"></i></a>
    <a href="#" title="ÖĞRETMEN GİRİŞİ"><i class="fa fa-twitter"></i></a>
    <a href="#" title="ÖĞRETMEN GİRİŞİ"><i class="fa fa-instagram"></i></a>
     <a href="#" title="ÖĞRETMEN GİRİŞİ"><i class="fa fa-youtube"></i></a>
</div>
<!-- #PaylasButon -->
   <li><a href="#." ><i class="fa fa-share-square-o"></i></a></li>
</div>
<!-- #PaylasYazi -->
</div>
<!-- #Paylas -->

Onur89TR adlı üyeden alıntı: mesajı görüntüle

Şimdi yazdım. Umarım işini görür.

Not: 87px ve 24px'i kendi ikon boyutuna göre değiştirmen, matematiksel hesap yapman gerekecektir.

<style>
#Paylas #PaylasYazi {
	float: left;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	overflow: hidden;
	font-family: Arial;
}
#Paylas #PaylasYazi #PaylasButon {
	width: 0px;
	height: 24px;
	line-height: 24px;
	float: left;
	overflow: hidden;
	-moz-transition: width 0.5s;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
}
#Paylas #PaylasYazi:hover #PaylasButon {
	width: 87px;
}
#Paylas #PaylasYazi #PaylasButon a {
	height: 24px;
	float: left;
	background-color: #cc0000;
	display: block;
	overflow: hidden;
	width: 0px;
	-moz-transition: width 0.5s margin-right 0.5s;
	-webkit-transition: width 0.5s margin-right 0.5s;
	transition: width 0.5s, margin-right 0.5s;
	margin-right: 0px;
}
#Paylas #PaylasYazi #PaylasButon a img {
	-moz-transition: width 0.5s;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
	width: 0px;
	height: 24px;
}
#Paylas #PaylasYazi:hover #PaylasButon a {
	width: 24px;
	margin-right: 5px;
}
#Paylas #PaylasYazi:hover #PaylasButon a img {
	width: 24px;
}
</style>
<div id="Paylas">
<div id="PaylasYazi">
<div id="PaylasButon">
	<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
	<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
	<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
</div>
<!-- #PaylasButon -->
Paylaş
</div>
<!-- #PaylasYazi -->
</div>
<!-- #Paylas -->

25-02-2017, 19:38:52

Onur89TR

3 buton olacak şekilde genişlikleri tekrar ayarladım. Harflerin olduğu yerlere font awesome ikon kodlarını koyarsan olacaktır diye düşünüyorum. Diğer renkler için yine class açmalısın. Sosyal Medya renklerine şu adresten bakabilirsin. Bir de, iç içe kodlar için boşlukları tab ile bırakman daha iyi olur. Yaptığın şekilde kodlar çalışmaz hale gelmekte.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#Paylas #PaylasYazi {
	height: 34px;
	line-height: 34px;
	font-size: 16px;
	font-family: Arial;
}
#Paylas #PaylasYazi #PaylasButon {
	width: 0px;
	height: 34px;
	line-height: 34px;
	float: left;
	overflow: hidden;
	-moz-transition: width 0.5s;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
}
#Paylas #PaylasYazi:hover #PaylasButon {
	width: 117px;
}
#Paylas #PaylasYazi #PaylasButon a {
	height: 34px;
	float: left;
	display: block;
	overflow: hidden;
	width: 0px;
	-moz-transition: width 0.5s margin-right 0.5s;
	-webkit-transition: width 0.5s margin-right 0.5s;
	transition: width 0.5s, margin-right 0.5s;
	margin-right: 0px;
	text-align: center;
	color: #ffffff;
	text-decoration: none;
	line-height: 34px !important;
	height: 34px;
}
#Paylas #PaylasYazi #PaylasButon a.fb {
	background-color: #3b5998;
}
#Paylas #PaylasYazi #PaylasButon a.twt {
	background-color: #55acee;
}
#Paylas #PaylasYazi #PaylasButon a.ggl {
	background-color: #dd4b39;
}
#Paylas #PaylasYazi #PaylasButon a img {
	-moz-transition: width 0.5s;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
	width: 0px;
	height: auto;
}
#Paylas #PaylasYazi:hover #PaylasButon a {
	width: 34px;
	margin-right: 5px;
}
#Paylas #PaylasYazi:hover #PaylasButon a img {
	width: 34px;
}
</style>
</head><body>
<div id="Paylas">
<div id="PaylasYazi">
<div id="PaylasButon">
	<a class="fb" href="#" title="ÖĞRETMEN GİRİŞİ">f</a>
	<a class="twt" href="#" title="ÖĞRETMEN GİRİŞİ">t</a>
	<a class="ggl" href="#" title="ÖĞRETMEN GİRİŞİ">g</a>
</div>
<!-- #PaylasButon -->
Paylaş
</div>
<!-- #PaylasYazi -->
</div>
<!-- #Paylas -->
</body>

25-02-2017, 23:31:31

#5

deSefa

teşekkür ederim tam istediğim gibi oldu
sağol
25-02-2017, 23:41:44

#6

Onur89TR

Ben teşekkür ederim, iyi forumlar.