侧导航课程、班级名称长度控制；箭头替换；tip显示更改

app/views/layouts/_user_courses.html.erb

@@ -2,10 +2,17 @@
     <li>
       <span class="user_icons_class"></span>
       <% is_teacher = User.current.logged? && (User.current.admin? || User.current.allowed_to?(:as_teacher,course)) %>
-      <p href="javascript:void(0);" id="show_course_<%= course.id %>" class="course_list_menu" title="<%= course.syllabus.title+' · '+(course.is_public? ? '公开班级：' : '私有班级：')+course.name+'（'+current_time_and_term(course)+'）' %>">
+      <p href="javascript:void(0);" id="show_course_<%= course.id %>" class="course_list_menu pr" >
-        <%= link_to course.syllabus.title, syllabus_path(course.syllabus_id), :target => '_blank', :class => 'hidden', :style => "max-width:85px; display:inline-block;"%>
+        <% title = "<span class='course-name'>#{course.syllabus.title}</span>".html_safe %>
+        <%= link_to title, syllabus_path(course.syllabus_id), :target => '_blank', :class => 'hidden', :style => "max-width:91px; display:inline-block;"%>
         <font class="fb c_grey" style="height:39px; line-height:39px; vertical-align:top;">·</font>
-        <%= link_to course.name, course_path(course.id,:host=>Setting.host_course), :target => '_blank', :class => 'hidden', :style => "max-width:85px; display:inline-block;"%>
+        <% classes = "<span class='course-name'>#{course.name}</span>".html_safe %>
+        <%= link_to classes, course_path(course.id,:host=>Setting.host_course), :target => '_blank', :class => 'hidden', :style => "max-width:91px; display:inline-block;"%>
+        <span class="sub-menu-title c_dark">
+          课程名称：<%= course.syllabus.title %><br />
+          班级名称：<%= course.name+'（'+current_time_and_term(course)+'）' %><br />
+          班级属性：<%= course.is_public? ? '公开' : '私有' %>
+        </span>
       </p>
       <%#= link_to course.name+"("+current_time_and_term_short(course)+")", course_path(course.id,:host=>Setting.host_course),
                   :id => "show_course_#{course.id}", :class => 'course_list_menu hidden', :target => '_blank', :title => (course.is_public? ? "公开班级：":"私有班级：")+course.name+"（"+current_time_and_term(course)+"）"%>
@@ -106,16 +113,25 @@
     }
 
     $(".course_list_menu").each(function(){
-       var courseWidth = $(this).children().eq(0).width();
+       var courseWidth = $(this).children().eq(0).children().width();
-       var classWidth = $(this).children().eq(2).width();
+       var classWidth = $(this).children().eq(2).children().width();
-       var newClassWidth = 170 - courseWidth;
+       var newClassWidth = 182 - courseWidth;
-       var newCourseWidth = 170 - classWidth;
+       var newCourseWidth = 182 - classWidth;
         console.log(courseWidth, classWidth);
-       if(courseWidth < 80 && classWidth > 80){
+       if(courseWidth < 91 && classWidth > 91){
            $(this).children().eq(2).css("max-width",newClassWidth + "px");
        }
-       if(classWidth < 80 && courseWidth > 80){
+       if(classWidth < 91 && courseWidth > 91){
            $(this).children().eq(0).css("max-width",newCourseWidth + "px");
        }
     })
+
+        $(".course-name").each(function(){
+            $(this).mouseenter(function(){
+                $(this).parent().parent().children().eq(3).show();
+            });
+            $(this).mouseleave(function(){
+                $(this).parent().parent().children().eq(3).hide();
+            });
+        })
 </script>

public/stylesheets/css/structure.css

@@ -596,7 +596,7 @@ a.user_leftinfo_img { display:block; width:80px; height:80px; margin:15px auto;}
 .user_sub_menu li a:hover,.user_sub_menu li a:target {  color:#3b94d6; background:#fff url(/images/user/user_navmore_icons.png) 0px 0px no-repeat;}
 .user_sub_menu li a:hover,.user_sub_menu li a:target{}
 .user_sub_menu li:last-child a {  }
-.user_sub_menu li p {padding:0 25px; border:1px solid #e5e5e5; border-bottom:none; background:#f8f8f8;}
+.user_sub_menu li p {padding:0 15px 0 25px; border:1px solid #e5e5e5; border-bottom:none; background:#f8f8f8;}
 .user_sub_menu li p:hover {background:#fff;}
 .user_sub_menu li p:hover a {background:#fff;}
 .user_sub_menu li p:hover,.user_sub_menu li p:target {color:#3b94d6; background:#fff url(/images/user/user_navmore_icons.png) 0px 0px no-repeat;}
@@ -617,6 +617,7 @@ a.user_leftinfo_img { display:block; width:80px; height:80px; margin:15px auto;}
     width:20px;
     height:20px;
     background:url(/images/user/icons_user_leftnav.png) 0px -34px no-repeat;
+    z-index:99;
 }
 a.user_navmorebox{ display:block; width:238px; height:20px; position:relative; background:#f8f8f8;border:1px solid #e5e5e5; border-bottom:none;}
 a:hover.user_navmorebox{ background:#fff;}
@@ -639,6 +640,7 @@ a.user_navmorebox .user_icons_closeclass{
     background:url(/images/user/icons_user_leftnav.png) -25px -347px no-repeat;
 }
 .show-all-sub {position:absolute; top:18px; right:15px;}
+.sub-menu-title {position:absolute; border:1px solid #ddd; background-color:#fff; padding:2px 5px; z-index:99; white-space:nowrap; left:25px; top:35px; display:none;}
 /* 个人主页左侧导航更多功能 */
 .user_navmore_box {position:absolute; width:15px; height:15px; right:13px; top:17px; cursor:pointer;}
 .user_navmore_box ul li:hover ul {display:block; }