Skilled Gaming

Design/Web/Programming/IT => HTML => Developing => Tutoriale/Tutorials => Topic started by: Hectore on 16 June 2013, 19:53:46

Title: [TUT]Share Meniu
Post by: Hectore on 16 June 2013, 19:53:46

Salut tuturor !

Astazi am sa va arat cum sa faceti un meniu de share :)

In acest tutorial, voi "share-ui" tutorialul pentru meniul de share, vazut si in header.

DEMO : (http://i.imgur.com/d8nvBqJ.png)

1.Partea de CSS.
Adaugati in StyleSheet la tema. ( CSS-ul temei )

Code: [Select]

/* Share menu */

.share-menu { margin-top: -4px !important; }

/* Google Plus */

li#gplus {
margin-left:  -4px;
background: #E5E1DC;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
padding: 10px;}

li#gplus:hover { background: #DC4A38;}

li#gplus:hover a {
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
color: #fff; }

/* Twitter */

li#twitter {
margin-left:  -4px;
background: #E5E1DC;
padding: 10px;}

li#twitter:hover { background: #00ACEE;}

li#twitter:hover a {
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
color: #fff; }

/* Facebook */

li#facebook {
background: #E5E1DC;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
padding: 10px;}

li#facebook:hover { background: #3B5998;}

li#facebook:hover a {
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
color: #fff; }

/* Share */

ul.shareHere { padding: 5px 0 5px 0;}

ul.shareHere li a {
color: #7F6545;
font-weight: bold;}

ul.shareHere li {
font-family: Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;
font-size:14px;
display:inline;
list-style-type:none;
line-height:0;
width:auto;}
2.Partea de HTML
Puteti adauga unde doriti continutul codului, atat timp cat este o pagina in care codurile HTML ruleaza fara probleme.

Code: [Select]

<div class="share-menu">
<ul class="shareHere">
<li id="facebook"><a href="#">Facebook</a></li>
<li id="twitter"><a href="#">Twitter</a></li>
<li id="gplus"><a href="#">Google +</a></li>
</ul>
</div>
Sper ca v-am ajutat :)

Title: Re: Share Meniu
Post by: IstuntmanI on 16 June 2013, 20:25:23

Nu e tot codul ala, pentru ca nu-s si coduri javaScript care sa arate casuta de share si alte chestii, tu ai facut doar HTML si CSS. (doar stilul acelor scrisuri) Ia fa tu o pagina cu ce ai dat si ai sa vezi ca asa e.

+ asta nu e tutorial.