حصريا اضافة قائمة عمودية لاقسام المدونة بلوجر بتقنية CSS
اولا : نبحث عن وسم
</head>
ونضع الكود التالي فوقه
<style>
.menu, .menu-bar {
position: fixed;
top: 0;
left: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #f7f7f7;
z-index:10;
overflow:hidden;
box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li a{
display: block;
text-indent: -500em;
height: 5em;
width: 5em;
line-height: 5em;
text-align:center;
color: #72739f;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background 0.1s ease-in-out;
}
.menu li a:before {
font-family: FontAwesome;
speak: none;
text-indent: 0em;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
}
.menu li a.search:before {
content: "\f002";
}
.menu li a.archive:before {
content: "\f187";
}
.menu li a.pencil:before {
content: "\f040";
}
.menu li a.contact:before {
content: "\f003";
}
.menu li a.about:before {
content: "\f007";
}
.menu li a.home:before {
content: "\f039";
}
.menu-bar li a:hover,
.menu li a:hover,
.menu li:first-child a {
background: #a41517;
color: #fff;
}
.menu-bar{
overflow:hidden;
left:5em;
z-index:5;
width:0;
height:0;
transition: all 0.1s ease-in-out;
}
.menu-bar li a{
display: block;
height: 4em;
line-height: 4em;
text-align:center;
color: #72739f;
text-decoration:none;
position: relative;
font-family:verdana;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background 0.1s ease-in-out;
}
.menu-bar li:first-child a{
height:5em;
background: #a41517;
color: #fff;
line-height:5
}
.para{
color:#033f72;
padding-left:100px;
font-size:3em;
margin-bottom:20px;
}
.open{
width:10em;
height:100%;
}
@media all and (max-width: 500px) {
.container{
margin-top:100px;
}
.menu{
height:5em;
width:100%;
}
.menu li{
display:inline-block;
float:left;
}
.menu-bar li a{
width:100%;
}
.menu-bar{
width:100%;
left:0;
height:0;
}
.open{
width:100%;
height:auto;
}
.para{
padding-left:5px;
}
}
@media screen and (max-height: 34em){
.menu li,
.menu-bar {
font-size:70%;
}
}
@media screen and (max-height: 34em) and (max-width: 500px){
.menu{
height:3.5em;
}
}
</style>
ثانيا : نضع كود التالي فوق وسم
</body>
add_comment ليست هناك تعليقات:
إرسال تعليق