آموزش طراحی منو ثابت زیبا برای سایت
آموزش طراحی منو ثابت زیبا برای سایت
با یکی دیگر از آموزش های طراحی وب از سایت سورس سافت با آموزش طراحی منو ثابت زیبا برای سایت از بخش آموزش html در خدمت شما دوستان هستیم.
این پروژه طراحی وب با html و css طراحی شده است که شامل یک صفحه html و دارای چندین DIV است که هر کدام دارای متن های مختلف می باشد. شما با کلیک بر روی هر بخش از سمت راست منو می توانید به قسمت آن بروید و در صورت اسکرول، صفحه منو به صورت ثابت در کنار سایت باقی می ماند.
سورس کد DIV ثابت کنار صفحه:
<div id=“scrolling-menu”>
<div id=“Deluxe”>sourcesoft.ir</div>
<div id=“Super”>Super Deluxe</div>
<div id=“Matrimonial”>Matrimonial Room</div>
<div id=“Junior”>Junior Suite</div>
<div id=“Executive”>Executive Suite</div>
</div>
سورس کد DIV های متنی:
<div id=“scroll-content”>
<div id=“Deluxe-content”>
<h1>Deluxe</h1>
This elegantly appointed room has 2 beds, a double bed and a single bed. It also comes with a writing desk and a coffee table set. The dimension of this room is 30 sqm. / 323 sqft.
</div>
<div id=“Super-content”>
<h1>Super Deluxe</h1>
The super deluxe rooms are also known as the Business Class guest room with 2 beds, a double bed and a single bed. Relax and unwind after a long day and enjoy the bathtub in the cozy room. The dimension of this room is 30 sqm. / 323 sqft.
</div>
<div id=“Matrimonial-content”>
<h1>Matrimonial Room</h1>
The spacious matrimonial room is similar to the deluxe room but with one king bed and a larger room area.
</div>
<div id=“Junior-content”>
<h1>Junior Suite</h1>
The junior suite is a one bedroom suite with a king bed and comes with spacious sitting room. It is furnished with a dining set for 4 guests, a coffee table with two armchairs and a writing desk. The one and only Junior Suite is located at the fourth floor. The dimension of this room is 48 sqm. / 517 sqft.
</div>
<div id=“Executive-content”>
<h1>Executive Suite</h1>
There are 4 executive suites, three of which are a 2 room suite, while the other is a 1 bedroom suite. Designed for informal meetings and entertaining guests, the suites have a separate sitting room with a comfortable sofa, armchair, desk and dining table. The dimension of this room is 64 sqm. / 689 sqft.
</div>
</div>
سورس کد CSS:
<style type=”text/css”>
#scrolling-menu {
position: fixed;
width: 150px;
margin-top:10px;
}
#scrolling-menu div {
padding:11px;
background: antiquewhite;
color: blue;
cursor:pointer;
border:blue 1px solid;
}
#scrolling-menu div:hover {
padding:11px;
margin-bottom:1px;
background: #C7B3B3;
color: red;
cursor:pointer;
border:red 1px solid;
}
#scroll-content {
border-left:#CCC 4px solid;
margin-left:150px;
padding-left:60px;
color:black;
}
#scroll-content div {
margin-bottom: 60px;
}
h1 {
color:blue;
}
h1:hover {
color:red;
cursor:pointer;
}
</style>
سورس کد Jquery:
<script>
$(document).ready(function (){
$(window).scroll(function(e){
if ($(window).scrollTop() > ($(‘#scroll-content’).height() – $(‘#scrolling-menu’).height())){
var scroll = $(‘#scroll-content’).height() – $(‘#scrolling-menu’).height();
$(window).scrollTop(scroll);
return false;
}
});
$(‘#scrolling-menu div’).click(function() {
var target = $(this).attr(‘id’);
$(‘html, body’).animate({scrollTop: $(‘#’+target+‘-content’).offset().top}, 1000);
});
});
</script>
شما می توانید سورس پروژه آموزش طراحی منو ثابت زیبا برای سایت را از باکس سمت راست به صورت رایگان دانلود نمایید.
دیدگاه ها