Are you looking for New twitter design clone. Then you are at right place here at 99points.info I have created new twitter style header with fancy menu using jquery and CSS. I have also add new twitter style animated popup window which shows each tweets detail individually. I used some animation using jQuery and z-index property of CSS to handle the div. I hope it will work with all screen resolutions. Please if you like it then dont forget to share it. thanks !
Popular Tutorials on 99Points
I used no database for this. You can use db and fetch your all records but make them separate with their ids.
I used my own techniques to get this effects I hope it will work for all browsers.
JQuery Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
$(document).ready(function(){ //when clicked show another div $('.separate').click( function() { var getID = $(this).attr('id').replace('id-',''); /// check if div is already open var flag = $('#flag').val(); if(flag == 1) // hide it { $('#content2').css("z-index","-1"); $('#content2').animate( { left: '250px', },250); // set flag to 0 $('#flag').val(0); } else // show it { $('#content2').show(); $('#content2').animate( { left: '650px', },250, function() { $('#content2').css("z-index","1"); }); var divData = $('#id-'+getID).html(); $('#placer').html(''); $('#placer').html(divData); // set flag to 1 $('#flag').val(1); } }); // hide div $('.header-div span').click( function() { $('#content2').css("z-index","-1"); $('#content2').animate( { left: '250px', },250); // set flag to 1 $('#flag').val(0); }); /// top right menus $("ul.subnav").parent().append(" "); $("ul.topnav li span").click(function() { $(this).parent().find("ul.subnav").slideDown('fast').show(); $(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); }); }).hover(function() { $(this).addClass("subhover"); }, function(){ //On Hover Out $(this).removeClass("subhover"); }); }); // call this in body onload to set value again to 0 function clear(){$('#flag').val(0);} |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 |
body { margin: 0; padding: 0; border: none;background: #d48903; text-align: left; font: normal 13px Verdana, sans-serif; } #main{ width:100%; text-align:left} .separate{border-bottom:solid #CCCCCC 1px; height:50px; width:497px; padding:8px; cursor:pointer} .separate:hover{ background:#FEEBFB} .separate img{ float:left;} .separate p{ float:left; width:420px; padding-left:10px} .separate p a{ color:#990000} #placer{ padding:15px} #placer a{ color:#990000} #navigations { -webkit-box-shadow: rgba(0, 0, 0, 0.496094) 0px 1px 2px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#111)); left: 0px; position: fixed; top: 0px; width: 100%; -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); background:-moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent; border-radius: 5px; line-height: 40px; text-align: center; margin: 0px; } #search:focus{ -moz-box-shadow:0 0 3px #000000; background:none repeat scroll 0 0 #EEEEEE; border:1px solid #EEEEEE; color:#333333; text-shadow:0 1px 0 #FFFFFF } #search { -webkit-box-shadow: #444 0px 1px 0px; background: #666; border: 1px solid black; border-bottom-left-radius: 4px 4px; border-bottom-right-radius: 4px 4px; border-top-left-radius: 4px 4px; border-top-right-radius: 4px 4px; color: #CCC; font: normal normal normal 13px/normal Arial, sans-serif; padding: 6px 6px 4px; width: 240px; -moz-border-radius:4px 4px 4px 4px; -moz-box-shadow:0 1px 0 #444444; font:13px Arial,sans-serif; } #content { -moz-border-radius:5px 5px 5px 5px; -moz-box-shadow:0 3px 4px #999999; background:none repeat scroll 0 0 #FFFFFF; display:inline-block; float:left; padding:15px; margin-left:100px; -webkit-box-shadow: #444 0px 1px 0px; border: 1px solid #999999; border-bottom-left-radius: 4px 4px; border-bottom-right-radius: 4px 4px; border-top-left-radius: 4px 4px; border-top-right-radius: 4px 4px; height:100%; min-height:700px; width:520px; } #content2 { -moz-border-radius:5px 5px 5px 5px; -moz-box-shadow:0 3px 4px #999999; background:none repeat scroll 0 0 #FFFFFF; display:inline-block; float:left; left:400px; -webkit-box-shadow: #444 0px 1px 0px; border: 1px solid #999999; border-bottom-left-radius: 4px 4px; border-bottom-right-radius: 4px 4px; border-top-left-radius: 4px 4px; border-top-right-radius: 4px 4px; min-height:400px; display:none; width:380px; position:fixed; z-index:-1; } .header-div{background:none repeat scroll 0 0 #F4F4F4; height:20px;-moz-border-radius-topright:5px; background:none repeat scroll 0 0 #F4F4F4; padding:6px 10px;} .header-div span { cursor:pointer} #content h2 { color:#999999; font:bold 18px Helvetica Neue,Helvetica,sans-serif; margin:0 0 6px; text-shadow:0 1px 0 #FFFFFF; } #content textarea { -moz-border-radius:4px 4px 4px 4px; -moz-box-shadow:0 1px #FFFFFF; border:1px solid #CCCCCC; color:#222222; font:14px/18px Helvetica Neue,Arial,sans-serif; height:56px; max-width:482px; outline:medium none; overflow:hidden; padding:8px; width:490px;} ul { padding: 0;margin: 0px; } ul li { list-style-type: none; display:inline; } ul li a { color: #BABABA; text-decoration: none; text-shadow: 1px 1px 1px #000; padding: 10px 7px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-transition-property: color, background; } ul li a:hover { color: #fff; } .default { width: 100%; left:0; top:0; } #screen-name:hover { color: #fff; } #screen-name{ font-size:12px; cursor:pointer;color: #BABABA; } ul.profile-dropdown li a, ul.profile-dropdown li{ background-image:none; } ul.profile-dropdown{ position:relative} ul.profile-dropdown li:last-child a { -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; } ul.profile-dropdown li a:hover { color:#FFFFFF; } ul.profile-dropdown li { width:130px; } ul.topnav { list-style: none; margin: 2px 0 0 0; font-size: 1.0em; } ul.topnav li:hover { background:none repeat scroll 0 0 rgba(255, 255, 255, 0.1); } ul.topnav li { float: left; height:35px; padding: 0px; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 150px; border: 1px solid #111;text-align:left } ul.topnav li ul.subnav li{ margin: 0; padding: 0 0 0 10px; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 140px; text-align:left } html ul.topnav li ul.subnav li a { width: 145px; padding: 0px ; } |
I used hidden field to save a flag value 1-0. To make new popup div open and close on one click and other.
Comments are closed.