dock effect
This commit is contained in:
devin
Christophe Vilayphiou
parent
2646c3fe33
commit
293e084bea
|
|
@ -274,3 +274,33 @@ var orbitDesktop = function(dom){
|
||||||
|
|
||||||
orbitDesktop.prototype.themefolder = "themes";
|
orbitDesktop.prototype.themefolder = "themes";
|
||||||
|
|
||||||
|
// devin
|
||||||
|
(function(){
|
||||||
|
$(document).ready(function(){
|
||||||
|
var $widget_fn = $('.widget_fn'),
|
||||||
|
$fn_des = $('.fn_des');
|
||||||
|
|
||||||
|
$widget_fn.hover(function(){
|
||||||
|
var fn_name = $(this).find('img').attr('alt'),
|
||||||
|
nth = $(this).parents('.d_cate').index(),
|
||||||
|
des_left = $('.dock_child').eq(nth).width();
|
||||||
|
|
||||||
|
|
||||||
|
$(this).addClass('thmc1');
|
||||||
|
$fn_des
|
||||||
|
.text(fn_name)
|
||||||
|
.css({
|
||||||
|
'top':nth * 60,
|
||||||
|
'left': des_left + 60
|
||||||
|
})
|
||||||
|
.stop(true, true)
|
||||||
|
.fadeIn();
|
||||||
|
}, function(){
|
||||||
|
$(this).removeClass('thmc1');
|
||||||
|
$fn_des.stop(true, true).fadeOut();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}());
|
||||||
|
|
@ -89,6 +89,32 @@ a { text-decoration: none; }
|
||||||
height: 30px;
|
height: 30px;
|
||||||
margin: 15px 0 0 15px;
|
margin: 15px 0 0 15px;
|
||||||
}
|
}
|
||||||
|
.docklist {
|
||||||
|
|
||||||
|
}
|
||||||
|
.docklist li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.dock_child {
|
||||||
|
display: none;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
left: 60px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.docklist > li:hover .dock_child { display: block; }
|
||||||
|
.dock_item { float: left; }
|
||||||
|
.fn_des.thmtxt {
|
||||||
|
line-height: 60px;
|
||||||
|
padding: 0 6px;
|
||||||
|
font-size: 15px;
|
||||||
|
position: absolute;
|
||||||
|
min-width: 48px;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.ini_input {
|
.ini_input {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -249,19 +275,6 @@ a { text-decoration: none; }
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* fake Orbit bar */
|
|
||||||
#orbitbar {
|
|
||||||
height: 28px;
|
|
||||||
border-radius: 0px;
|
|
||||||
padding-top: 2px;
|
|
||||||
padding-bottom: 1px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
|
|
||||||
background-image: -webkit-linear-gradient(top, #444, #111);
|
|
||||||
position: absolute;
|
|
||||||
z-index: 9999;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#group_wrapper{
|
#group_wrapper{
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
@import url(http://fonts.googleapis.com/css?family=Cuprum);
|
||||||
@font-face{
|
@font-face{
|
||||||
font-family: 'WebSymbolsRegular';
|
font-family: 'WebSymbolsRegular';
|
||||||
src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>);
|
src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>);
|
||||||
|
|
|
||||||
|
|
@ -1,60 +1,61 @@
|
||||||
<div id="side">
|
<div id="side">
|
||||||
<div id="rwidget" class="wh3 thmc4">
|
<div id="rwidget" class="wh3 thmc4">
|
||||||
<ul class="docklist">
|
<ul class="docklist">
|
||||||
<li><a href="desktop" class="widget_fn wh3 hh3" id='d_desktop' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="home_icon" width="30" height="30"/></span></a>
|
<li class="d_cate"><a href="desktop" class="widget_fn wh3 hh3" id='d_desktop' onclick="return false;"><span class="widget_icon"><img src="" alt="Home" id="home_icon" width="30" height="30"/></span></a>
|
||||||
<ul>
|
<ul class="dock_child hh3 thmc4" style="width: 180px;">
|
||||||
<li><a href="app_manager" class="widget_fn wh3 hh3" id="d_app_manager" onclick="return false;"><span class="widget_icon"><img src="" alt="" id="app_manager_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="app_manager" class="widget_fn wh3 hh3" id="d_app_manager" onclick="return false;"><span class="widget_icon"><img src="" alt="App Manager" id="app_manager_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="sections" class="widget_fn wh3 hh3" id="d_sections" onclick="return false;"><span class="widget_icon"><img src="" alt="" id="sections_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="sections" class="widget_fn wh3 hh3" id="d_sections" onclick="return false;"><span class="widget_icon"><img src="" alt="All Sections" id="sections_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="settings" class="widget_fn wh3 hh3" id="d_settings" onclick="return false;"><span class="widget_icon"><img src="" alt="" id="settings_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="settings" class="widget_fn wh3 hh3" id="d_settings" onclick="return false;"><span class="widget_icon"><img src="" alt="Settings" id="settings_icon" width="30" height="30"/></span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="publication" class="widget_fn wh3 hh3" id='d_publication' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="publication_icon" width="30" height="30"/></span></a>
|
<li class="d_cate"><a href="publication" class="widget_fn wh3 hh3" id='d_publication' onclick="return false;"><span class="widget_icon"><img src="" alt="Publication" id="publication_icon" width="30" height="30"/></span></a>
|
||||||
<ul>
|
<ul class="dock_child hh3 thmc4" style="width: 180px;">
|
||||||
<li><a href="journal_p" class="widget_fn wh3 hh3" id='d_journal_p' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="journal_p_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="journal_p" class="widget_fn wh3 hh3" id='d_journal_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Journal Papers" id="journal_p_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="seminar_p" class="widget_fn wh3 hh3" id='d_seminar_p' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="seminar_p_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="seminar_p" class="widget_fn wh3 hh3" id='d_seminar_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Seminar Papers" id="seminar_p_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="books" class="widget_fn wh3 hh3" id='d_books' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="books_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="books" class="widget_fn wh3 hh3" id='d_books' onclick="return false;"><span class="widget_icon"><img src="" alt="Books" id="books_icon" width="30" height="30"/></span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="research" class="widget_fn wh3 hh3" id='d_research' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="research_icon" width="30" height="30"/></span></a>
|
<li class="d_cate"><a href="research" class="widget_fn wh3 hh3" id='d_research' onclick="return false;"><span class="widget_icon"><img src="" alt="Research" id="research_icon" width="30" height="30"/></span></a>
|
||||||
<ul>
|
<ul class="dock_child hh3 thmc4" style="width: 240px;">
|
||||||
<li><a href="research_d" class="widget_fn wh3 hh3" id='d_research_d' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="research_d_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="research_d" class="widget_fn wh3 hh3" id='d_research_d' onclick="return false;"><span class="widget_icon"><img src="" alt="Research Domain" id="research_d_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="research_p" class="widget_fn wh3 hh3" id='d_research_p' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="research_p_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="research_p" class="widget_fn wh3 hh3" id='d_research_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Research Project" id="research_p_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="patents" class="widget_fn wh3 hh3" id='d_patents' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="patents_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="patents" class="widget_fn wh3 hh3" id='d_patents' onclick="return false;"><span class="widget_icon"><img src="" alt="Patents" id="patents_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="labs" class="widget_fn wh3 hh3" id='d_labs' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="labs_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="labs" class="widget_fn wh3 hh3" id='d_labs' onclick="return false;"><span class="widget_icon"><img src="" alt="Labs" id="labs_icon" width="30" height="30"/></span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="experience" class="widget_fn wh3 hh3" id='d_experience' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="experience_icon" width="30" height="30"/></span></a>
|
<li class="d_cate"><a href="experience" class="widget_fn wh3 hh3" id='d_experience' onclick="return false;"><span class="widget_icon"><img src="" alt="Experience" id="experience_icon" width="30" height="30"/></span></a>
|
||||||
<ul>
|
<ul class="dock_child hh3 thmc4" style="width: 300px;">
|
||||||
<li><a href="working" class="widget_fn wh3 hh3" id='d_working' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="working_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="working" class="widget_fn wh3 hh3" id='d_working' onclick="return false;"><span class="widget_icon"><img src="" alt="Working" id="working_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="education" class="widget_fn wh3 hh3" id='d_education' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="education_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="education" class="widget_fn wh3 hh3" id='d_education' onclick="return false;"><span class="widget_icon"><img src="" alt="Education" id="education_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="honors" class="widget_fn wh3 hh3" id='d_honors' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="honors_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="honors" class="widget_fn wh3 hh3" id='d_honors' onclick="return false;"><span class="widget_icon"><img src="" alt="Honors" id="honors_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="activities" class="widget_fn wh3 hh3" id='d_activities' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="activities_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="activities" class="widget_fn wh3 hh3" id='d_activities' onclick="return false;"><span class="widget_icon"><img src="" alt="Activities" id="activities_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="clubs" class="widget_fn wh3 hh3" id='d_clubs' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="clubs_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="clubs" class="widget_fn wh3 hh3" id='d_clubs' onclick="return false;"><span class="widget_icon"><img src="" alt="Clubs" id="clubs_icon" width="30" height="30"/></span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="landt" class="widget_fn wh3 hh3" id='d_landt' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="landt_icon" width="30" height="30"/></span></a>
|
<li class="d_cate"><a href="landt" class="widget_fn wh3 hh3" id='d_landt' onclick="return false;"><span class="widget_icon"><img src="" alt="Learning & Teaching" id="landt_icon" width="30" height="30"/></span></a>
|
||||||
<ul>
|
<ul class="dock_child hh3 thmc4" style="width: 180px;">
|
||||||
<li><a href="courses" class="widget_fn wh3 hh3" id='d_courses' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="courses_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="courses" class="widget_fn wh3 hh3" id='d_courses' onclick="return false;"><span class="widget_icon"><img src="" alt="Courses" id="courses_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="homework" class="widget_fn wh3 hh3" id='d_homework' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="homework_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="homework" class="widget_fn wh3 hh3" id='d_homework' onclick="return false;"><span class="widget_icon"><img src="" alt="Homework" id="homework_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="certification" class="widget_fn wh3 hh3" id='d_certification' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="certification_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="certification" class="widget_fn wh3 hh3" id='d_certification' onclick="return false;"><span class="widget_icon"><img src="" alt="Certification" id="certification_icon" width="30" height="30"/></span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="personal" class="widget_fn wh3 hh3" id='d_personal' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="personal_icon" width="30" height="30"/></span></a>
|
<li class="d_cate"><a href="personal" class="widget_fn wh3 hh3" id='d_personal' onclick="return false;"><span class="widget_icon"><img src="" alt="Personal" id="personal_icon" width="30" height="30"/></span></a>
|
||||||
<ul>
|
<ul class="dock_child hh3 thmc4" style="width: 300px;">
|
||||||
<li><a href="mypage" class="widget_fn wh3 hh3" id='d_mypage' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="mypage_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="mypage" class="widget_fn wh3 hh3" id='d_mypage' onclick="return false;"><span class="widget_icon"><img src="" alt="myPage" id="mypage_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="blog" class="widget_fn wh3 hh3" id='d_blog' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="blog_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="blog" class="widget_fn wh3 hh3" id='d_blog' onclick="return false;"><span class="widget_icon"><img src="" alt="Blog" id="blog_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="album" class="widget_fn wh3 hh3" id='d_album' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="album_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="album" class="widget_fn wh3 hh3" id='d_album' onclick="return false;"><span class="widget_icon"><img src="" alt="Album" id="album_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="calendar" class="widget_fn wh3 hh3" id='d_calendar' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="calendar_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="calendar" class="widget_fn wh3 hh3" id='d_calendar' onclick="return false;"><span class="widget_icon"><img src="" alt="Calendar" id="calendar_icon" width="30" height="30"/></span></a></li>
|
||||||
<li><a href="files" class="widget_fn wh3 hh3" id='d_files' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="files_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="files" class="widget_fn wh3 hh3" id='d_files' onclick="return false;"><span class="widget_icon"><img src="" alt="Files" id="files_icon" width="30" height="30"/></span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="orbit" class="widget_fn wh3 hh3" id='d_orbit' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="orbit_icon" width="30" height="30"/></span></a>
|
<li class="d_cate"><a href="orbit" class="widget_fn wh3 hh3" id='d_orbit' onclick="return false;"><span class="widget_icon"><img src="" alt="Orbit" id="orbit_icon" width="30" height="30"/></span></a>
|
||||||
<ul>
|
<ul class="dock_child hh3 thmc4" style="width: 60px;">
|
||||||
<li><a href="connection" class="widget_fn wh3 hh3" id='d_connection' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="connection_icon" width="30" height="30"/></span></a></li>
|
<li class="dock_item"><a href="connection" class="widget_fn wh3 hh3" id='d_connection' onclick="return false;"><span class="widget_icon"><img src="" alt="Academia Connection" id="connection_icon" width="30" height="30"/></span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="appstore" class="widget_fn wh3 hh3" id='d_appstore' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="appstore_icon" width="30" height="30"/></span></a></li>
|
<li class="d_cate"><a href="appstore" class="widget_fn wh3 hh3" id='d_appstore' onclick="return false;"><span class="widget_icon"><img src="" alt="AppStore" id="appstore_icon" width="30" height="30"/></span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<div class="fn_des hh3 thmc2 thmtxt"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="container">
|
<div id="container">
|
||||||
|
|
|
||||||
Reference in New Issue