Больше добавлений было добавлено на логотип jquery

Question

Я пытался улучшить подменю jQuery, но я споткнулся о некоторых проблемах CSS.

Вот мои вопросы:

1. Как я могу исправить эту проблему, когда я вновь открыть навигацию снова добавляет отступы на дно, чем она была открыта в первый раз?

.sidebar-nav { 
 
    position: fixed; 
 
    float: left; 
 
    width: 250px; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #e74c3c; 
 
    color: #aaabae; 
 
    font-family: "Lato"; 
 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
 
    z-index: 1; 
 
} 
 

 
#nav { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-bottom: 20px; 
 
} 
 

 
#nav li { 
 
    position: relative; 
 
    margin: 0; 
 
    font-size: 15px; 
 
    border-bottom: 1px solid #fff; 
 
    padding: 0; 
 
} 
 

 
#nav li ul { 
 
    opacity: 0; 
 
    height: 0px; 
 
} 
 

 
#nav li a { 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    position: relative; 
 
    display: block; 
 
    padding: 16px 25px; 
 
    color: #fff; 
 
    white-space: nowrap; 
 
    z-index: 2; 
 
    text-decoration: none 
 
} 
 

 
#nav li a:hover { 
 
    color: #c0392b; 
 
    background-color: #ecf0f1; 
 
} 
 

 

 

 
#nav ul li { 
 
\t background-color: #2b303a; 
 
} 
 

 
#nav li:first-child { 
 
\t border-top: 1px solid #fff; 
 
} 
 

 
#nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 

 
#nav .fa { margin: 0px 17px 0px 0px; } 
 

 
.logo { 
 
    width: 100%; 
 
    padding: 21px; 
 
    margin-bottom: 20px; 
 
    box-sizing: border-box; 
 
} 
 

 
#logo{ 
 
color: #fff; 
 
    font-size: 30px; 
 
    font-style: normal; 
 
} 
 

 
.sidebar-icon { 
 
    position: relative; 
 
    float: right; 
 
    text-align: center; 
 
    line-height: 1; 
 
    font-size: 25px; 
 
    padding: 6px 8px; 
 
    color: #fff; 
 
} 
 

 
.disp { 
 
    opacity: 1!important; 
 
    height:auto!important; 
 
    transition: height 100ms ease-in-out; 
 
    transition-delay: 300ms; 
 
}

Answer 1

1. Убедитесь, что height свойство .logo устанавливается в том же значении, когда .content одновременно с и без .sidebar-collapsed класса.
2. padding property of .logo is too large; для гамбургера осталось почти ничего.

Возможно, вы используете только padding, чтобы центрировать другие иконки меню. Рассмотрите еще одну тактику - есть много лучших способов сделать это.

• https://css-tricks.com/centering-css-complete-guide/#center-horizontally
• http://howtocenterincss.com/

Answer 2

попробовать это:

html, 
body { 
font-family: 'Lato', sans-serif; 
    height: 100%; 
    background: #ecf0f1; 
} 


a { 
    color: #008DE7; 
    font-style: italic; 
    font-weight: 700; 
} 


.content { 
    min-width: 1260px; 
    position: relative; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    margin: 0px auto; 
} 

.content.sidebar-collapsed { 
    padding-right: 65px; 
    transition: all 100ms linear; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed-back { 
    padding-right: 280px; 
    transition: all 100ms linear; 
} 

.content.sidebar-collapsed .sidebar-nav { 
    width: 65px; 
    transition: all 100ms ease-in-out; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed-back .sidebar-nav { 
    width: 280px; 
    transition: all 100ms ease-in-out; 
} 

.content.sidebar-collapsed .logo { 
    padding: 18px; 
    box-sizing: border-box; 
    transition: all 100ms ease-in-out; 
    transition-delay: 300ms; 
    padding-bottom:0; 
    margin:0; 
} 

.content.sidebar-collapsed-back .logo { 
    width: 100%; 
    padding: 21px; 
    /* height: 136px; */ 
    box-sizing: border-box; 
    transition: all 100ms ease-in-out; 
} 

.content.sidebar-collapsed #logo { 
    opacity: 0; 
    transition: all 200ms ease-in-out; 
} 

.content.sidebar-collapsed-back #logo { 
    opacity: 1; 
    transition: all 200ms ease-in-out; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed #nav span { 
    opacity: 0; 
    transition: all 50ms linear; 
} 

.content.sidebar-collapsed-back #nav span { 
    opacity: 1; 
    transition: all 200ms linear; 
} 

.sidebar-nav { 
    position: fixed; 
    float: left; 
    width: 250px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #e74c3c; 
    color: #aaabae; 
    font-family: "Lato"; 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
    z-index: 1; 
} 

#nav { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    margin-bottom: 20px; 
} 

#nav li { 
    position: relative; 
    margin: 0; 
    font-size: 15px; 
    border-bottom: 1px solid #fff; 
    padding: 0; 
} 

#nav li ul { 
    opacity: 0; 
    height: 0px; 
} 

#nav li a { 
    font-style: normal; 
    font-weight: 400; 
    position: relative; 
    display: block; 
    padding: 16px 25px; 
    color: #fff; 
    white-space: nowrap; 
    z-index: 2; 
    text-decoration: none 
} 

#nav li a:hover { 
    color: #c0392b; 
    background-color: #ecf0f1; 
} 



#nav ul li { 
    background-color: #2b303a; 
} 

#nav li:first-child { 
    border-top: 1px solid #fff; 
} 

#nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 



#nav .fa { margin: 0px 17px 0px 0px; } 

.logo { 
    width: 100%; 
    padding: 21px; 
    margin-bottom: 20px; 
    box-sizing: border-box; 
} 

#logo{ 
color: #fff; 
    font-size: 30px; 
    font-style: normal; 
} 

.sidebar-icon { 
    position: relative; 
    float: right; 
    text-align: center; 
    line-height: 1; 
    font-size: 25px; 
    padding: 6px 8px; 
    color: #fff; 
} 

.disp { 
    opacity: 1!important; 
    height:auto!important; 
    transition: height 100ms ease-in-out; 
    transition-delay: 300ms; 
} 

demo:

Answer 3

Я изменил поля, поскольку некоторые элементы имеют некоторые inncorrect поля, и я сделал некоторые изменения в переходы, а также lso я изменил ширину навигации, начиная с 250px, и стал 280px после свертывания и расширения снова.

просто попробовать это, надеюсь, что это помогает :)

html, 
body { 
font-family: 'Lato', sans-serif; 
    height: 100%; 
    background: #ecf0f1; 
} 


a { 
    color: #008DE7; 
    font-style: italic; 
    font-weight: 700; 
} 


.content { 
    min-width: 1260px; 
    position: relative; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    margin: 0px auto; 
} 

.content.sidebar-collapsed { 
    padding-right: 65px; 
    transition: all 100ms linear; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed-back { 
    padding-right: 280px; 
} 

.content.sidebar-collapsed .sidebar-nav { 
    width: 65px; 
    transition: all 100ms ease-in-out; 
    transition-delay: 300ms; 
} 

.content.sidebar-collapsed-back .sidebar-nav { 
    width: 250px; 
} 

.content.sidebar-collapsed .logo { 
    box-sizing: border-box; 
    transition: all 200ms; 
    overflow:auto; 
} 

.content.sidebar-collapsed-back .logo { 
    width: 100%; 
    padding: 21px; 
    margin:0; 
    box-sizing: border-box; 
} 

.content.sidebar-collapsed #logo { 
    opacity: 0; 
    display:none; 
    transition: all 200ms; 
} 

.content.sidebar-collapsed-back #logo { 
    opacity: 1; 
    display:inline-block; 
    transition-delay:500ms; 
} 

.content.sidebar-collapsed #nav span { 
    opacity: 0; 
    transition: all 200ms; 
} 

.content.sidebar-collapsed-back #nav .fa-plus { 
    opacity: 0; 
    transition: all 200ms; 
} 

.content.sidebar-collapsed-back #nav .fa-plus { 
    opacity: 1; 
    transition-delay:500ms; 
} 

.content.sidebar-collapsed-back #nav span { 
    opacity: 1; 
} 

.sidebar-nav { 
    position: fixed; 
    float: left; 
    width: 250px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #e74c3c; 
    color: #aaabae; 
    font-family: "Lato"; 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
    z-index: 1; 
    transition:all 200ms; 
} 

#nav { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    margin-bottom: 20px; 
} 

#nav li { 
    position: relative; 
    margin: 0; 
    font-size: 15px; 
    border-bottom: 1px solid #fff; 
    padding: 0; 
} 

#nav li ul { 
    opacity: 0; 
    height: 0px; 
    transition:all 200ms; 
} 

#nav li a { 
    font-style: normal; 
    font-weight: 400; 
    position: relative; 
    display: block; 
    padding: 16px 25px; 
    color: #fff; 
    white-space: nowrap; 
    z-index: 2; 
    text-decoration: none; 
} 

#nav li a:hover { 
    color: #c0392b; 
    background-color: #ecf0f1; 
} 



#nav ul li { 
    background-color: #2b303a; 
} 

#nav li:first-child { 
    border-top: 1px solid #fff; 
} 

#nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 



#nav .fa { margin: 0px 17px 0px 0px; } 

.logo { 
    width: 100%; 
    padding: 21px; 
    box-sizing: border-box; 
} 

#logo{ 
color: #fff; 
    font-size: 30px; 
    font-style: normal; 
} 

.sidebar-icon { 
    position: relative; 
    float: right; 
    text-align: center; 
    line-height: 1; 
    font-size: 25px; 
    height:34px; 
    color: #fff; 
} 

.disp { 
    opacity: 1!important; 
    height:auto!important; 
    transition:all 200ms; 
}