Jump to content

Modificare il menu

RobertoChiaiese98

By RobertoChiaiese98
in Forum generale

 Share

Recommended Posts

RobertoChiaiese98 Newbie

RobertoChiaiese98

Posted
Posted (edited)

Salve ragazzi, vorrei modificare il top-menu del mio negozio ( http://www.gliamicidileo.altervista.org/ ). 

Il primo problema ( quello più semplice  :lol: ) che non riesco a risolvere, è cambiare il font del menù e eliminare quell' uppercase che rende maiuscole tutte le parole. 

 

Un'ulteriore cosa che mi infastidisce e che come potete vedere, quando andate, per esempio, su "Cani", escono una serie di prodotti, il problema è che là dove non ho sotto categorie, sono presenti spazi bianchi enormi. L'ideale sarebbe disporli in colonne( come la seconda foto) , senza lasciare quello spazio inutile bianco. Potreste aiutarmi ? Nel caso in cui vi stiate chiedendo come ho fatto a "raggiungere" ciò che voglio, sappiate che è solo Paint  :ph34r:  :D

Sotto ho allegato le foto.

Ecco il codice di superfish-modified.css

/*** ESSENTIAL STYLES ***/
.sf-contener {
  margin-top: 16px;
  margin-bottom: 10px;
  width: 100%;
  }

#block_top_menu {background: #c0392b}
#block_top_menu .submenu-container { width: 100%}  

.sf-menu,
.sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none; }

.sf-menu {
  /* position: relative; */
  padding: 0;
  position: relative;
  width: 100%;
  }
  
.sf-menu ul {
  position: absolute;
  top: -999em;
  background: white; }
  
.sf-menu ul li {
  width: 100%; }

.sf-menu li:hover {
  visibility: inherit;
  /* fixes IE7 'sticky bug' */ }

.sf-menu > li {
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  float: left;
  }
  
  .sf-menu > li:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  } 
  

  .sf-menu > li > a {
    font-weight: 600;
    font-size: 14px;    
    text-transform: uppercase;
    color: #fff;
    position: relative;
    display: block;
    padding: 14px 20px;
  -webkit-transition: all 300ms ease-in-out 0s;
	-moz-transition: all 300ms ease-in-out 0s;
	-o-transition: all 300ms ease-in-out 0s;
	-ms-transition: all 300ms ease-in-out 0s;
	transition: all 300ms ease-in-out 0s; 
    }                      
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    color: #fff;
    border-bottom-color: transparent;
    }

.sf-menu li li li a {
  display: inline-block;
  position: relative;
  color: #dedede;
  font-size: 13px;
  line-height: 16px;
  padding-bottom: 10px; }
  
  .sf-menu li li li a:hover {
    color: #ccc; }

.sf-menu li ul {
  display: none;
  left: 0;
  top: 49px;
  background: #fff;
  /* match top ul list item height */
  z-index: 99;
  padding: 12px 0px 18px 0px;
    padding: 12px 0px 18px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px;
  }
  
.sf-menu li li ul {
  position: static;
  display: block !important;
  opacity: 1 !important;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; }

.sf-menu li li li ul {
  padding: 0 0 0 20px; }

.sf-menu li li li ul {
  width: 220px; }

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

.sf-menu > li > ul {
  padding: 26px 21px 31px;
  width: 100%; }
  .sf-menu > li > ul > li > a {
    text-transform: uppercase;
    font-weight: 800;
    color: #444; }
    .sf-menu > li > ul > li > a:hover {
      color: #000; }

.sf-menu > li > ul > li {
  float: left;
  width: 20%;
  padding-right: 15px; }
  
.sf-menu > li > ul > li.category-thumbnail {
  width: 100% !important;
  float: none;
  clear: both;
  overflow: hidden;
  padding-right: 0; }
  .sf-menu > li > ul > li.category-thumbnail > div {
    float: left;
    padding-left: 10px;
    width: 33.333%; }
    
    .sf-menu > li > ul > li.category-thumbnail > div:first-child {
      padding-left: 0; }
    .sf-menu > li > ul > li.category-thumbnail > div img {
      max-width: 100%;
      display: block; }

.cat-title {
  display: none; }
  
.sf-menu li.sf-search {
  border: none; }
  .sf-menu li.sf-search input {
    display: inline;
    padding: 0 13px;
    height: 30px;
    line-height: 30px;
    background: white;
    margin: 13px 10px 0 0;
    font-size: 13px;
    color: #9c9b9b;
    border: 1px solid #d6d4d4; }

.sf-menu > li > a.sf-with-ul {
padding-right: 25px;
}

.sf-menu > li > a.sf-with-ul:before {
  content: "\f107";
  font-family: "FontAwesome";
  font-size: 14px;
  line-height: 14px;
  color: #fff;
  position: absolute;
  right: 11px;
  top: 12px;
  font-weight: normal;
  vertical-align: 5px;
  padding-left: 4px; 
        -webkit-transition: all 300ms ease-in-out 0s;
	-moz-transition: all 300ms ease-in-out 0s;
	-o-transition: all 300ms ease-in-out 0s;
	-ms-transition: all 300ms ease-in-out 0s;
	transition: all 300ms ease-in-out 0s;
}

.sf-menu > li.sfHoverForce > a.sf-with-ul:before, .sf-menu > li.sfHoverForce > a.sf-with-ul:before, .sf-menu > li > a.sf-with-ul:before:hover  {
  content: "\f107";
  font-family: "FontAwesome";
  font-size: 14px;
  line-height: 14px;
  color: #fff;
  position: absolute;
  right: 11px;
  top: 12px;
  vertical-align: 5px;
  padding-left: 4px; 
}

.sf-menu > li.sfHover, .sf-menu > li.sfHoverForce, .sf-menu > li > a:hover, .sf-menu > li > a:active {
  text-decoration: none!important;
  background: #c3493c;
  outline: 0;
  color: white;
} 

.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
  outline:    0;
	  -webkit-transition: background 400ms ease-in-out;
    -moz-transition: background  400ms ease-in-out;
    -o-transition: background  400ms ease-in-out;
    transition: background  400ms ease-in-out; 
}

.sf-menu > li > ul > li > a, .sf-menu > li > ul > li > ul > li > a.sf-with-ul {
    display: block;
}

#block_top_menu .category-thumbnail {
  clear: both;
  width: 100%;
  float: none; }
  #block_top_menu .category-thumbnail div {
    float: left;
    width: 33.33333%; }
    #block_top_menu .category-thumbnail div img {
      max-width: 100%; }
#block_top_menu li.category-thumbnail {
  padding-right: 0; }

Grazie 

post-1308675-0-10063200-1473720424_thumb.png

post-1308675-0-12370200-1473720626_thumb.png

Edited by RobertoChiaiese98 (see edit history)
Link to comment
Share on other sites
nicola.raphael Newbie

nicola.raphael

Posted
Posted (edited)

Per eliminare la trasformazione in maiuscole è sufficiente togliere:

text-transform: uppercase;

La seconda questione è più complessa, inoltre non credo ti convenga fare una cosa del genere, perché alteresti la visualizzazione delle categorie anche laddove la sottocategorie esistono. 

Edited by nicola.raphael (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...